Admin features: dashboard, statistics, quiz/user management, UI improvements

Author: Ani Gasitashvili

.idea/dataSources.xml

@@ -0,0 +1,3 @@
+{
+    "java.compile.nullAnalysis.mode": "automatic"
+}

.idea/modules.xml

@@ -0,0 +1,3 @@
+{
+  "proxy": "http://localhost:8081"
+} 

.vscode/settings.json

@@ -6,18 +6,29 @@ const AdminDashboard = () => {
     const [error, setError] = useState('');
     const [newTitle, setNewTitle] = useState('');
     const [newContent, setNewContent] = useState('');
+    const [currentUsername, setCurrentUsername] = useState('');
 
     useEffect(() => {
         document.title = "Admin Dashboard";
         fetchUsers();
+        fetchCurrentUser();
     }, []);
 
+    const fetchCurrentUser = async () => {
+        try {
+            const res = await fetch('http://localhost:8081/api/home', { credentials: 'include' });
+            const data = await res.json();
+            setCurrentUsername(data.user);
+        } catch (err) {
+            setCurrentUsername('');
+        }
+    };
+
     const fetchUsers = async () => {
         try {
             const res = await axios.get('http://localhost:8081/api/admin/users', {
                 withCredentials: true,
             });
-
             setUsers(Array.isArray(res.data) ? res.data : []);
         } catch (err) {
             setError('Failed to fetch users. You must be an admin.');
@@ -72,7 +83,7 @@ const AdminDashboard = () => {
                 <table>
                     <thead>
                     <tr>
-                        <th>ID</th>
+                        {/* <th>ID</th> */}
                         <th>Username</th>
                         <th>Role</th>
                         <th>Actions</th>
@@ -81,14 +92,17 @@ const AdminDashboard = () => {
                     <tbody>
                     {users.map((user) => (
                         <tr key={user.id}>
-                            <td>{user.id}</td>
+                            {/* <td>{user.id}</td> */}
                             <td>{user.username}</td>
-                            <td>{user.role}</td>
+                            <td>{user.role === 'ROLE_ADMIN' ? 'Admin' : 'User'}</td>
                             <td>
                                 {user.role !== 'ROLE_ADMIN' && (
                                     <button onClick={() => promoteUser(user.id)}>Promote</button>
                                 )}
-                                <button onClick={() => deleteUser(user.id)}>Delete</button>
+                                {/* Hide delete button for current user */}
+                                {user.username !== currentUsername && (
+                                    <button onClick={() => deleteUser(user.id)}>Delete</button>
+                                )}
                             </td>
                         </tr>
                     ))}

quiz-frontend/package.json

@@ -7,11 +7,14 @@ import { useNavigate } from 'react-router-dom';
 const Home = () => {
     const [message, setMessage] = useState('');
     const [username, setUsername] = useState('');
+    const [role, setRole] = useState(''); // NEW: store role
     const [error, setError] = useState('');
     const [announcements, setAnnouncements] = useState([]);
     const [isFriendsModalOpen, setFriendsModalOpen] = useState(false);
     const [isMessagesModalOpen, setMessagesModalOpen] = useState(false);
     const [isSignOutModalOpen, setSignOutModalOpen] = useState(false);
+    const [showStats, setShowStats] = useState(false); // NEW: show/hide stats modal
+    const [stats, setStats] = useState(null); // NEW: store stats
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -25,6 +28,7 @@ const Home = () => {
             .then((data) => {
                 setMessage(data.message);
                 setUsername(data.user);
+                setRole(data.role); // NEW: set role
             })
             .catch((err) => setError(err.message));
 
@@ -45,15 +49,54 @@ const Home = () => {
         navigate('/login');
     };
 
+    // Fetch statistics when modal is opened
+    const handleShowStats = async () => {
+        try {
+            const res = await fetch('http://localhost:8081/api/admin/statistics', { credentials: 'include' });
+            if (!res.ok) throw new Error('Failed to fetch statistics');
+            const data = await res.json();
+            setStats(data);
+        } catch (e) {
+            setStats({ error: 'Failed to fetch statistics' });
+        }
+        setShowStats(true);
+    };
+
     return (
         <div className="auth-container">
-            {/* Top-left sign out button */}
-            <div className="top-left-signout">
-                <button className="signout-icon-button" onClick={() => setSignOutModalOpen(true)} title="Sign Out">
-                    ⬅️
-                </button>
+            {/* Top-left action bar */}
+            <div style={{ position: 'fixed', top: 24, left: 32, display: 'flex', gap: 12, zIndex: 2000, background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.10)', padding: '6px 12px' }}>
+                {role === 'ROLE_ADMIN' && (
+                    <>
+                        <button onClick={() => navigate('/admin')} style={{ background: '#312e81', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(49,46,129,0.08)', cursor: 'pointer', transition: 'background 0.2s' }} onMouseOver={e => e.currentTarget.style.background='#4338ca'} onMouseOut={e => e.currentTarget.style.background='#312e81'}>Admin</button>
+                        <button onClick={handleShowStats} style={{ background: '#0d9488', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(13,148,136,0.08)', cursor: 'pointer', transition: 'background 0.2s' }} onMouseOver={e => e.currentTarget.style.background='#14b8a6'} onMouseOut={e => e.currentTarget.style.background='#0d9488'}>Statistics</button>
+                    </>
+                )}
+                <button onClick={() => setMessagesModalOpen(true)} style={{ background: '#2563eb', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(37,99,235,0.08)', cursor: 'pointer', transition: 'background 0.2s' }} onMouseOver={e => e.currentTarget.style.background='#1d4ed8'} onMouseOut={e => e.currentTarget.style.background='#2563eb'}>Messages</button>
+                <button onClick={() => setFriendsModalOpen(true)} style={{ background: '#059669', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(5,150,105,0.08)', cursor: 'pointer', transition: 'background 0.2s' }} onMouseOver={e => e.currentTarget.style.background='#10b981'} onMouseOut={e => e.currentTarget.style.background='#059669'}>Friends</button>
+                <button onClick={() => setSignOutModalOpen(true)} style={{ background: '#e11d48', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(225,29,72,0.08)', cursor: 'pointer', transition: 'background 0.2s' }} onMouseOver={e => e.currentTarget.style.background='#be123c'} onMouseOut={e => e.currentTarget.style.background='#e11d48'}>Sign Out</button>
             </div>
 
+            {/* Statistics Modal */}
+            {showStats && (
+                <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.25)', zIndex: 3000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <div style={{ background: '#fff', borderRadius: 12, padding: 32, minWidth: 320, boxShadow: '0 4px 24px rgba(0,0,0,0.12)', position: 'relative' }}>
+                        <button onClick={() => setShowStats(false)} style={{ position: 'absolute', top: 12, right: 12, background: 'none', border: 'none', fontSize: 22, cursor: 'pointer', color: '#888' }}>&times;</button>
+                        <h2 style={{ color: '#4f46e5', marginBottom: 18 }}>Site Statistics</h2>
+                        {stats ? (
+                            stats.error ? <div style={{ color: 'red' }}>{stats.error}</div> :
+                            <ul style={{ fontSize: 18, lineHeight: 2 }}>
+                                <li><b>Users:</b> {stats.users}</li>
+                                <li><b>Quizzes:</b> {stats.quizzes}</li>
+                                <li><b>Quizzes Taken:</b> {stats.quizzesTaken}</li>
+                            </ul>
+                        ) : (
+                            <div>Loading...</div>
+                        )}
+                    </div>
+                </div>
+            )}
+
             {/* Sign-out Modal */}
             {isSignOutModalOpen && (
                 <div className="signout-modal-overlay">
@@ -89,7 +132,7 @@ const Home = () => {
                             <li key={a.id}>
                                 <strong>{a.title}</strong><br />
                                 <span>{a.content}</span><br />
-                                <small>{new Date(a.createdAt).toLocaleString()}</small>
+                                <small>{new Date(a.createdAt).toLocaleString(undefined, { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</small>
                                 <hr />
                             </li>
                         ))}
@@ -101,16 +144,6 @@ const Home = () => {
             <button onClick={() => navigate('/quizzes')} style={{marginTop: '20px', marginRight: '10px'}}>Browse Quizzes</button>
             <button onClick={() => navigate('/create-quiz')} style={{marginTop: '20px'}}>Create a Quiz</button>
 
-            {/* Top-right floating icons */}
-            <div className="top-right-icons">
-                <button onClick={() => setMessagesModalOpen(true)} className="messages-icon-button" title="Messages">
-                    💬
-                </button>
-                <button onClick={() => setFriendsModalOpen(true)} className="friends-icon-button" title="Friends">
-                    👥
-                </button>
-            </div>
-
             {/* Modals */}
             <FriendsModal
                 isOpen={isFriendsModalOpen}

quiz-frontend/quiz-frontend/src/components/AdminDashboard.js

@@ -24,9 +24,14 @@ const QuizList = () => {
     const [quizzes, setQuizzes] = useState([]);
     const [error, setError] = useState('');
     const [useTestQuizzes, setUseTestQuizzes] = useState(false);
+    const [role, setRole] = useState(''); // NEW: store role
     const navigate = useNavigate();
 
     useEffect(() => {
+        fetch('http://localhost:8081/api/home', { credentials: 'include' })
+            .then((res) => res.json())
+            .then((data) => setRole(data.role || ''));
+
         fetch('http://localhost:8081/api/quizzes', {
             credentials: 'include'
         })
@@ -48,26 +53,42 @@ const QuizList = () => {
             });
     }, []);
 
+    const handleDelete = async (quizId) => {
+        if (!window.confirm('Are you sure you want to delete this quiz?')) return;
+        try {
+            await fetch(`http://localhost:8081/api/quizzes/${quizId}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+            setQuizzes(quizzes.filter(q => q.id !== quizId));
+        } catch (err) {
+            alert('Failed to delete quiz.');
+        }
+    };
+
     const displayQuizzes = useTestQuizzes ? TEST_QUIZZES : quizzes;
 
     return (
-        <div className="quiz-list-container">
-            <h2 style={{textAlign:'center',marginBottom:'24px'}}>Available Quizzes</h2>
-            {error && <div style={{ color: 'red', marginBottom: '1em' }}>{error}</div>}
-            <ul className="quiz-list">
-                {displayQuizzes.map(quiz => (
-                    <li key={quiz.id} className="quiz-card">
+        <div className="quiz-list-container" style={{ maxWidth: 600, margin: '40px auto', background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px rgba(0,0,0,0.10)', padding: 32 }}>
+            <h2 style={{textAlign:'center',marginBottom:'32px', color: '#4f46e5', fontWeight: 700}}>Available Quizzes</h2>
+            {error && <div className="auth-error">{error}</div>}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+                {displayQuizzes.map((quiz) => (
+                    <div key={quiz.id} style={{ background: '#f9fafb', borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', transition: 'box-shadow 0.2s', border: '1px solid #e5e7eb' }}>
                         <div>
-                            <div className="quiz-title">{quiz.title}</div>
-                            <div className="quiz-meta">by {quiz.createdBy || quiz.creator}</div>
+                            <div style={{ fontSize: 20, fontWeight: 600, color: '#22223b', marginBottom: 4 }}>{quiz.title}</div>
+                            <div style={{ color: '#6366f1', fontWeight: 500, fontSize: 15 }}>by {quiz.creator || quiz.createdBy || 'unknown'}</div>
+                        </div>
+                        <div style={{ display: 'flex', gap: 10 }}>
+                            <button onClick={() => navigate(`/quiz/${quiz.id}`)} style={{ padding: '8px 16px', background: '#6366f1', color: '#fff', border: 'none', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 15, transition: 'background 0.2s' }}>Check it out</button>
+                            {role === 'ROLE_ADMIN' && !useTestQuizzes && (
+                                <button onClick={() => handleDelete(quiz.id)} style={{ padding: '8px 16px', background: '#e11d48', color: '#fff', border: 'none', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 15, transition: 'background 0.2s' }}>Delete</button>
+                            )}
                         </div>
-                        <button className="quiz-btn quiz-btn-primary" onClick={() => navigate(`/quiz-summary/${quiz.id}`)}>
-                            Check it out
-                        </button>
-                    </li>
+                    </div>
                 ))}
-            </ul>
-            {displayQuizzes.length === 0 && <div>No quizzes available.</div>}
+            </div>
+            {displayQuizzes.length === 0 && <div style={{textAlign:'center',marginTop:32}}>No quizzes available.</div>}
         </div>
     );
 };

quiz-frontend/quiz-frontend/src/components/Home.js

@@ -2,6 +2,11 @@
 
 import com.quizapp.model.User;
 import com.quizapp.repository.UserRepository;
+import com.quizapp.repository.FriendRequestRepository;
+import com.quizapp.repository.MessageRepository;
+import com.quizapp.repository.QuizAttemptRepository;
+import com.quizapp.repository.AnswerRepository;
+import com.quizapp.repository.QuizRepository;
 import com.quizapp.util.SecurityUtils;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
@@ -17,6 +22,11 @@
 public class AdminController {
 
     private final UserRepository userRepository;
+    private final FriendRequestRepository friendRequestRepository;
+    private final MessageRepository messageRepository;
+    private final QuizAttemptRepository quizAttemptRepository;
+    private final AnswerRepository answerRepository;
+    private final QuizRepository quizRepository;
 
     // ✅ Get all users
     @GetMapping("/users")
@@ -53,11 +63,58 @@ public ResponseEntity<String> deleteUser(@PathVariable Long id, Authentication a
             return ResponseEntity.status(403).build();
         }
 
-        if (userRepository.existsById(id)) {
-            userRepository.deleteById(id);
-            return ResponseEntity.ok("User deleted successfully.");
-        } else {
+        Optional<User> userOpt = userRepository.findById(id);
+        if (userOpt.isEmpty()) {
             return ResponseEntity.notFound().build();
         }
+        User user = userOpt.get();
+        String username = user.getUsername();
+
+        // 1. Delete all friend requests involving this user
+        friendRequestRepository.deleteAll(friendRequestRepository.findByRequester(user));
+        friendRequestRepository.deleteAll(friendRequestRepository.findByAddressee(user));
+
+        // 2. Remove this user from all friends' lists (bidirectional)
+        for (User u : userRepository.findAll()) {
+            if (u.getFriends().remove(user)) {
+                userRepository.save(u);
+            }
+        }
+        user.getFriends().clear();
+        userRepository.save(user);
+
+        // 3. Delete all messages sent or received by this user
+        messageRepository.deleteAll(messageRepository.findBySenderUsernameAndReceiverUsernameOrderByTimestampDesc(username, username));
+        // Delete all messages where this user is sender or receiver
+        messageRepository.deleteAll(messageRepository.findAll().stream().filter(m -> m.getSenderUsername().equals(username) || m.getReceiverUsername().equals(username)).toList());
+
+        // 4. Delete all quiz attempts and answers by this user
+        var attempts = quizAttemptRepository.findByUserIdOrderByStartTimeDesc(user.getId());
+        for (var attempt : attempts) {
+            answerRepository.deleteAll(answerRepository.findByQuizAttemptIdOrderByQuestionNumber(attempt.getId()));
+            quizAttemptRepository.delete(attempt);
+        }
+
+        // 5. Finally, delete the user
+        userRepository.deleteById(id);
+        return ResponseEntity.ok("User deleted successfully.");
+    }
+
+    @GetMapping("/statistics")
+    public ResponseEntity<?> getStatistics(Authentication authentication) {
+        if (!SecurityUtils.isAdmin(authentication)) {
+            return ResponseEntity.status(403).build();
+        }
+        long userCount = userRepository.count();
+        long quizCount = quizRepository.count();
+        // Count only completed, non-practice quiz attempts
+        long quizAttempts = quizAttemptRepository.findAll().stream().filter(a -> Boolean.TRUE.equals(a.getIsCompleted()) && Boolean.FALSE.equals(a.getIsPracticeMode())).count();
+        return ResponseEntity.ok(
+            java.util.Map.of(
+                "users", userCount,
+                "quizzes", quizCount,
+                "quizzesTaken", quizAttempts
+            )
+        );
     }
 }

quiz-frontend/quiz-frontend/src/components/QuizList.js

@@ -21,9 +21,12 @@ public Map<String, String> home(@AuthenticationPrincipal org.springframework.sec
         if (user != null) {
             response.put("message", "Welcome to the home page!");
             response.put("user", user.getUsername());
+            // Add role to response
+            response.put("role", user.getAuthorities().stream().findFirst().map(Object::toString).orElse(""));
         } else {
             response.put("message", "Not authenticated");
             response.put("user", null);
+            response.put("role", "");
         }
         return response;
     }