Skip to content

Commit dc38181

Browse files
author
Uttam Singh
committed
Added Admin Dashboard and updated App.jsx routing
1 parent b926608 commit dc38181

File tree

2 files changed

+233
-0
lines changed

2 files changed

+233
-0
lines changed

‎frontend/src/pages/AdminDashboard.jsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
export default function AdminDashboard() {
4+
const [users, setUsers] = useState([]);
5+
const [form, setForm] = useState({
6+
name: "",
7+
email: "",
8+
password: "",
9+
department: "",
10+
role: "",
11+
manager_email: "",
12+
});
13+
const [message, setMessage] = useState("");
14+
15+
// Fetch users list
16+
useEffect(() => {
17+
fetch("https://fat-eibl-backend-x1sp.onrender.com/users/")
18+
.then((res) => res.json())
19+
.then(setUsers)
20+
.catch(() => setMessage("Failed to fetch users"));
21+
}, []);
22+
23+
// Handle form input change
24+
const handleChange = (e) =>
25+
setForm({ ...form, [e.target.name]: e.target.value });
26+
27+
// Handle user creation
28+
const handleCreate = async (e) => {
29+
e.preventDefault();
30+
setMessage("Creating user...");
31+
32+
const body = new FormData();
33+
for (const key in form) body.append(key, form[key]);
34+
35+
const res = await fetch(
36+
"https://fat-eibl-backend-x1sp.onrender.com/users/",
37+
{
38+
method: "POST",
39+
body,
40+
}
41+
);
42+
const data = await res.json();
43+
if (data.ok) {
44+
setMessage("✅ User created successfully");
45+
setForm({
46+
name: "",
47+
email: "",
48+
password: "",
49+
department: "",
50+
role: "",
51+
manager_email: "",
52+
});
53+
const refreshed = await fetch(
54+
"https://fat-eibl-backend-x1sp.onrender.com/users/"
55+
).then((r) => r.json());
56+
setUsers(refreshed);
57+
} else {
58+
setMessage("❌ Error: " + (data.error || "Could not create user"));
59+
}
60+
};
61+
62+
// Handle user deletion
63+
const handleDelete = async (id) => {
64+
if (!window.confirm("Are you sure you want to delete this user?")) return;
65+
await fetch(`https://fat-eibl-backend-x1sp.onrender.com/users/${id}`, {
66+
method: "DELETE",
67+
});
68+
const refreshed = await fetch(
69+
"https://fat-eibl-backend-x1sp.onrender.com/users/"
70+
).then((r) => r.json());
71+
setUsers(refreshed);
72+
};
73+
74+
return (
75+
<div style={{ padding: "40px", background: "#f8faff", minHeight: "100vh" }}>
76+
<h1 style={{ color: "#004aad", textAlign: "center" }}>
77+
👨‍💼 Admin Dashboard
78+
</h1>
79+
<p style={{ textAlign: "center", color: "#555" }}>
80+
Create and manage users by department
81+
</p>
82+
83+
<div
84+
style={{
85+
background: "white",
86+
padding: "25px",
87+
borderRadius: "10px",
88+
maxWidth: "600px",
89+
margin: "30px auto",
90+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
91+
}}
92+
>
93+
<h2>Create New User</h2>
94+
<form onSubmit={handleCreate}>
95+
<input
96+
name="name"
97+
placeholder="Full Name"
98+
value={form.name}
99+
onChange={handleChange}
100+
required
101+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
102+
/>
103+
<input
104+
name="email"
105+
placeholder="Email"
106+
value={form.email}
107+
onChange={handleChange}
108+
required
109+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
110+
/>
111+
<input
112+
name="password"
113+
placeholder="Password"
114+
value={form.password}
115+
onChange={handleChange}
116+
required
117+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
118+
/>
119+
<input
120+
name="department"
121+
placeholder="Department"
122+
value={form.department}
123+
onChange={handleChange}
124+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
125+
/>
126+
<input
127+
name="manager_email"
128+
placeholder="Manager Email"
129+
value={form.manager_email}
130+
onChange={handleChange}
131+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
132+
/>
133+
<select
134+
name="role"
135+
value={form.role}
136+
onChange={handleChange}
137+
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
138+
>
139+
<option value="">Select Role</option>
140+
<option value="auditor">Auditor</option>
141+
<option value="auditee">Auditee</option>
142+
<option value="manager">Manager</option>
143+
</select>
144+
<button
145+
type="submit"
146+
style={{
147+
background: "#004aad",
148+
color: "white",
149+
padding: "10px 20px",
150+
border: "none",
151+
borderRadius: "8px",
152+
cursor: "pointer",
153+
width: "100%",
154+
}}
155+
>
156+
Create User
157+
</button>
158+
</form>
159+
{message && <p style={{ marginTop: "10px" }}>{message}</p>}
160+
</div>
161+
162+
<div
163+
style={{
164+
background: "white",
165+
padding: "25px",
166+
borderRadius: "10px",
167+
maxWidth: "800px",
168+
margin: "30px auto",
169+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
170+
}}
171+
>
172+
<h2>Existing Users</h2>
173+
<table
174+
border="1"
175+
cellPadding="8"
176+
style={{ width: "100%", borderCollapse: "collapse" }}
177+
>
178+
<thead style={{ background: "#004aad", color: "white" }}>
179+
<tr>
180+
<th>ID</th>
181+
<th>Name</th>
182+
<th>Email</th>
183+
<th>Department</th>
184+
<th>Role</th>
185+
<th>Action</th>
186+
</tr>
187+
</thead>
188+
<tbody>
189+
{users.length === 0 ? (
190+
<tr>
191+
<td colSpan="6" align="center">
192+
No users found
193+
</td>
194+
</tr>
195+
) : (
196+
users.map((u) => (
197+
<tr key={u.id}>
198+
<td>{u.id}</td>
199+
<td>{u.name}</td>
200+
<td>{u.email}</td>
201+
<td>{u.department}</td>
202+
<td>{u.role}</td>
203+
<td>
204+
<button
205+
onClick={() => handleDelete(u.id)}
206+
style={{
207+
background: "red",
208+
color: "white",
209+
border: "none",
210+
padding: "5px 10px",
211+
borderRadius: "5px",
212+
cursor: "pointer",
213+
}}
214+
>
215+
Delete
216+
</button>
217+
</td>
218+
</tr>
219+
))
220+
)}
221+
</tbody>
222+
</table>
223+
</div>
224+
</div>
225+
);
226+
}

‎frontend/src/pages/App.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ import React from "react";
22
import { BrowserRouter, Routes, Route } from "react-router-dom";
33
import Login from "./Login.jsx";
44
import Dashboard from "./Dashboard.jsx";
5+
import AdminDashboard from "./AdminDashboard.jsx"; // ✅ Import added
56

67
export default function App() {
78
return (
89
<BrowserRouter>
910
<Routes>
11+
{/* Default login page */}
1012
<Route path="/" element={<Login />} />
13+
14+
{/* Regular user dashboard */}
1115
<Route path="/dashboard" element={<Dashboard />} />
16+
17+
{/* ✅ Admin dashboard route */}
18+
<Route path="/admin-dashboard" element={<AdminDashboard />} />
1219
</Routes>
1320
</BrowserRouter>
1421
);

0 commit comments

Comments
 (0)