Feat : Now you can add students to groups (Drag and Drop feature) + fixed major bugs

Backend/routes/admin.js

@@ -98,6 +98,58 @@
     }
   });
 
+  // @route   PUT /api/admin/users/:userId
+  // @desc    Edit a user (specifically for HR users to edit email/password)
+  // @access  Admin
+  router.put('/users/:userId', async (req, res) => {
+    try {
+      const { userId } = req.params;
+      const { email, password, name, group } = req.body;
+
+      const user = await User.findById(userId);
+      if (!user) return res.status(404).json({ message: 'User not found' });
+
+      // Ensure we don't accidentally edit an admin user here for safety
+      if (user.role === 'admin') {
+        return res.status(403).json({ message: 'Cannot edit admin users through this endpoint' });
+      }
+
+      if (email) user.email = email;
+      if (password) user.password = password; // Will be hashed by pre-save hook
+      if (name) user.name = name;
+      if (group !== undefined) user.group = group;
+
+      await user.save();
+
+      res.json({ message: 'User updated successfully', user: { id: user._id, name: user.name, email: user.email, role: user.role } });
+    } catch (error) {
+      if (error.code === 11000) {
+        return res.status(400).json({ message: 'Email already exists' });
+      }
+      res.status(500).json({ message: 'Server error', error: error.message });
+    }
+  });
+
+  // @route   PUT /api/admin/users/:userId/group
+  // @desc    Assign user to a group explicitly
+  // @access  Admin
+  router.put('/users/:userId/group', async (req, res) => {
+    try {
+      const { userId } = req.params;
+      const { group } = req.body;
+
+      const user = await User.findById(userId);
+      if (!user) return res.status(404).json({ message: 'User not found' });
+      
+      user.group = group || 'General';
+      await user.save();
+
+      res.json({ message: 'User assigned to group successfully', user });
+    } catch (error) {
+      res.status(500).json({ message: 'Server error', error: error.message });
+    }
+  });
+
   // @route   GET /api/admin/users/:userId/history
   // @desc    Get a user's test history
   // @access  Admin
@@ -602,10 +654,9 @@
       const correctStr = correct.toString().trim();
       const correctArr = correctStr.split(',').map(s => s.trim());
 
-      // 🔥 convert text → index
+      // Save exact literal text of correct answer
       const correctAnswers = options
-        .map((opt, index) => correctArr.includes(opt) ? index.toString() : null)
-        .filter(val => val !== null);
+        .filter(opt => correctArr.includes(opt));
 
       if (correctAnswers.length === 0) {
         throw new Error(`Correct answer "${correctStr}" not matching options`);

Backend/routes/hr.js

@@ -357,6 +357,31 @@ router.delete('/groups/:name', async (req, res) => {
   }
 });
 
+// @route   PUT /api/hr/users/:userId/group
+// @desc    Assign user to a group explicitly
+// @access  HR
+router.put('/users/:userId/group', async (req, res) => {
+  try {
+    const { userId } = req.params;
+    const { group } = req.body;
+
+    const user = await User.findById(userId);
+    if (!user) return res.status(404).json({ message: 'User not found' });
+    
+    // Only allow HR to modify candidates (optional security check)
+    if (user.role === 'admin' || user.role === 'hr') {
+      return res.status(403).json({ message: 'HR can only assign candidates to groups' });
+    }
+
+    user.group = group || 'General';
+    await user.save();
+
+    res.json({ message: 'User assigned to group successfully', user });
+  } catch (error) {
+    res.status(500).json({ message: 'Server error', error: error.message });
+  }
+});
+
 // @route   GET /api/hr/stats
 router.get('/stats', async (req, res) => {
   try {

Frontend/src/app/app.routes.ts

@@ -41,6 +41,10 @@ export const routes: Routes = [
         path: 'manage-groups',
         loadComponent: () => import('./pages/admin/manage-groups/manage-groups').then(m => m.ManageGroupsComponent)
       },
+      {
+        path: 'hr-users',
+        loadComponent: () => import('./pages/admin/hr-users/hr-users').then(m => m.AdminHrUsersComponent)
+      },
       {
         path: 'submissions/:submissionId',
         loadComponent: () => import('./pages/admin/submission-detail/submission-detail').then(m => m.SubmissionDetailComponent)
@@ -109,10 +113,6 @@ export const routes: Routes = [
         path: 'dashboard',
         loadComponent: () => import('./pages/candidate/dashboard/dashboard').then(m => m.CandidateDashboardComponent)
       },
-      {
-        path: 'quiz/:quizId',
-        loadComponent: () => import('./pages/candidate/take-quiz/take-quiz').then(m => m.TakeQuizComponent)
-      },
       {
         path: 'profile',
         loadComponent: () => import('./pages/candidate/profile/profile').then(m => m.CandidateProfileComponent)
@@ -124,6 +124,13 @@ export const routes: Routes = [
     ]
   },
 
+  // Standalone Candidate Routes (Maximized, no sidebar)
+  {
+    path: 'candidate/quiz/:quizId',
+    canActivate: [candidateGuard],
+    loadComponent: () => import('./pages/candidate/take-quiz/take-quiz').then(m => m.TakeQuizComponent)
+  },
+
   // Backward compat: old student routes redirect to candidate
   { path: 'student', redirectTo: '/candidate', pathMatch: 'prefix' },
   { path: 'student/dashboard', redirectTo: '/candidate/dashboard' },

Frontend/src/app/components/layout/layout.html

@@ -128,6 +128,19 @@
           </div>
           <span class="material-symbols-rounded arrow-icon">arrow_forward</span>
         </a>
+        
+        @if (authService.getUserRole() === 'admin') {
+          <a routerLink="/admin/hr-users" class="glassy-option" (click)="closeManageUsersPopup()">
+            <div class="option-icon-wrapper">
+              <span class="material-symbols-rounded block-icon">assignment_ind</span>
+            </div>
+            <div class="option-text">
+              <h3>HR Users</h3>
+              <p>Manage HR staff platform access</p>
+            </div>
+            <span class="material-symbols-rounded arrow-icon">arrow_forward</span>
+          </a>
+        }
       </div>
     </div>
   </div>

Frontend/src/app/pages/admin/hr-users/hr-users.css

+.page-container { padding: 32px 40px; max-width: 1000px; }
+.page-header { margin-bottom: 28px; }
+.page-header h1 { font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
+.page-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }
+
+.section-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
+.form-card .section-title { margin-top: 0; border: none; padding: 0; margin-bottom: 16px; }
+
+.card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
+.card-padding { padding: 24px; }
+
+.group-form { display: flex; flex-direction: column; }
+.row-align { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
+
+.input-container { flex: 1; position: relative; display: flex; align-items: center; min-width: 220px; }
+.input-container .block-icon { position: absolute; left: 16px; color: var(--text-muted); font-size: 20px; }
+.form-input { width: 100%; padding: 14px 16px 14px 44px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-primary); outline: none; transition: all 0.3s; font-size: 15px; box-sizing: border-box; }
+.form-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
+.form-input-small { padding: 10px 14px; font-size: 14px; border-radius: 8px; }
+
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: inherit; font-size: 15px; }
+.btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 15px rgba(102,126,234,0.3); }
+.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
+.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
+
+.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+.group-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; display: flex; align-items: stretch; gap: 16px; transition: all 0.3s; }
+.group-card:hover { border-color: var(--accent-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
+.group-icon-wrapper { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(102,126,234,0.2) 100%); color: var(--accent-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.group-icon-wrapper .material-symbols-rounded { font-size: 26px; }
+.group-details h4 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); }
+
+.action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
+.action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.text-danger:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
+.text-success:hover { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
+
+.alert { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 12px; margin-bottom: 24px; font-size: 14px; font-weight: 500; }
+.alert-success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); color: #22c55e; }
+.alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
+
+.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
+.loader { width: 40px; height: 40px; border: 3px solid rgba(102,126,234,0.2); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
+.loading-state { display: flex; justify-content: center; padding: 40px; }
+@keyframes spin { 100% { transform: rotate(360deg); } }
+
+.empty-state { text-align: center; padding: 60px 0; border: 1px dashed var(--border-color); border-radius: 16px; background: rgba(255,255,255,0.02); }
+.empty-icon { font-size: 48px; color: var(--text-muted); display: block; margin-bottom: 12px; opacity: 0.6; }
+.empty-state h3 { color: var(--text-primary); margin: 0 0 8px; font-size: 18px; }
+.empty-state p { color: var(--text-muted); margin: 0; font-size: 14px; }
+
+@media (max-width: 600px) {
+  .page-container { padding: 20px 16px; }
+  .row-align { flex-direction: column; align-items: stretch; }
+  .groups-grid { grid-template-columns: 1fr; }
+}

Frontend/src/app/pages/admin/hr-users/hr-users.html

+<div class="page-container animate-fade-in">
+  <div class="page-header">
+    <h1>HR Users</h1>
+    <p class="page-subtitle">Manage HR Staff platform access and identity</p>
+  </div>
+
+  @if (error()) {
+    <div class="alert alert-error"><span class="material-symbols-rounded">error</span> {{ error() }}</div>
+  }
+  @if (success()) {
+    <div class="alert alert-success"><span class="material-symbols-rounded">check_circle</span> {{ success() }}</div>
+  }
+
+  <div class="card card-padding form-card" style="margin-bottom: 40px;">
+    <h2 class="section-title">Add HR User</h2>
+    <form (ngSubmit)="createHRUser()" class="group-form">
+      <div class="form-group row-align">
+        <div class="input-container">
+          <span class="material-symbols-rounded block-icon">badge</span>
+          <input class="form-input" [ngModel]="newName()" (ngModelChange)="newName.set($event)" name="name" placeholder="Full Name" required>
+        </div>
+        <div class="input-container">
+          <span class="material-symbols-rounded block-icon">mail</span>
+          <input class="form-input" type="email" [ngModel]="newEmail()" (ngModelChange)="newEmail.set($event)" name="email" placeholder="Email Address" required>
+        </div>
+        <div class="input-container">
+          <span class="material-symbols-rounded block-icon">lock</span>
+          <input class="form-input" type="password" [ngModel]="newPassword()" (ngModelChange)="newPassword.set($event)" name="password" placeholder="Password" required>
+        </div>
+        
+        <button type="submit" class="btn btn-primary" [disabled]="creating() || !newName().trim() || !newEmail().trim() || !newPassword().trim()">
+          @if (creating()) {
+            <span class="spinner"></span>
+          } @else {
+            <span class="material-symbols-rounded">person_add</span> Add HR
+          }
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <h2 class="section-title">Existing HR Users</h2>
+  @if (loading()) {
+    <div class="loading-state">
+      <div class="loader"></div>
+    </div>
+  } @else if (hrUsers().length === 0) {
+    <div class="empty-state">
+      <span class="material-symbols-rounded empty-icon">manage_accounts</span>
+      <h3>No HR users available</h3>
+      <p>Add your first HR user above</p>
+    </div>
+  } @else {
+    <div class="groups-grid">
+      @for (user of hrUsers(); track user._id) {
+        <div class="group-card">
+          <div class="group-icon-wrapper">
+            <span class="material-symbols-rounded">admin_panel_settings</span>
+          </div>
+          <div class="group-details" style="flex: 1;">
+            @if (editingId() === user._id) {
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <input type="text" class="form-input form-input-small" [ngModel]="editName()" (ngModelChange)="editName.set($event)" placeholder="Name" autofocus>
+                <input type="email" class="form-input form-input-small" [ngModel]="editEmail()" (ngModelChange)="editEmail.set($event)" placeholder="Email">
+                <input type="password" class="form-input form-input-small" [ngModel]="editPassword()" (ngModelChange)="editPassword.set($event)" placeholder="New Password (optional)">
+              </div>
+            } @else {
+              <h4>{{ user.name }}</h4>
+              <p style="margin: 4px 0 0; font-size: 13px; color: var(--text-muted);">{{ user.email }}</p>
+            }
+          </div>
+          <div class="group-actions" style="display: flex; gap: 8px;">
+            @if (editingId() === user._id) {
+              <button class="action-btn text-success" (click)="saveEdit(user._id)" title="Save"><span class="material-symbols-rounded">check</span></button>
+              <button class="action-btn text-danger" (click)="cancelEdit()" title="Cancel"><span class="material-symbols-rounded">close</span></button>
+            } @else {
+              <button class="action-btn" (click)="startEdit(user)" title="Edit"><span class="material-symbols-rounded">edit</span></button>
+              <button class="action-btn text-danger" (click)="deleteHRUser(user._id)" title="Delete"><span class="material-symbols-rounded">delete</span></button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  }
+</div>

Frontend/src/app/pages/admin/hr-users/hr-users.ts

+import { Component, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { AuthService } from '../../../services/auth.service';
+import { QuizService } from '../../../services/quiz.service';
+
+@Component({
+  selector: 'app-hr-users',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterLink],
+  templateUrl: './hr-users.html',
+  styleUrl: './hr-users.css'
+})
+export class AdminHrUsersComponent implements OnInit {
+  hrUsers = signal<any[]>([]);
+  loading = signal<boolean>(true);
+  error = signal<string>('');
+  success = signal<string>('');
+  
+  // Create New HR
+  newName = signal('');
+  newEmail = signal('');
+  newPassword = signal('');
+  creating = signal(false);
+
+  // Edit HR
+  editingId = signal<string | null>(null);
+  editName = signal('');
+  editEmail = signal('');
+  editPassword = signal('');
+  saving = signal(false);
+
+  constructor(private quizService: QuizService) {}
+
+  ngOnInit(): void {
+    this.loadHRUsers();
+  }
+
+  loadHRUsers(): void {
+    this.loading.set(true);
+    this.quizService.getUsers('hr').subscribe({
+      next: (res) => {
+        this.hrUsers.set(res.users);
+        this.loading.set(false);
+      },
+      error: () => this.loading.set(false)
+    });
+  }
+
+  createHRUser(): void {
+    if (!this.newName().trim() || !this.newEmail().trim() || !this.newPassword().trim()) {
+      this.error.set('Please fill out name, email, and password');
+      return;
+    }
+    
+    this.creating.set(true);
+    this.error.set('');
+    this.success.set('');
+
+    this.quizService.createHRUser({
+      name: this.newName().trim(),
+      email: this.newEmail().trim(),
+      password: this.newPassword().trim()
+    }).subscribe({
+      next: () => {
+        this.success.set('HR User created successfully!');
+        this.creating.set(false);
+        this.newName.set('');
+        this.newEmail.set('');
+        this.newPassword.set('');
+        this.loadHRUsers();
+      },
+      error: (err) => {
+        this.error.set(err.error?.message || 'Failed to create HR user');
+        this.creating.set(false);
+      }
+    });
+  }
+
+  startEdit(user: any): void {
+    this.editingId.set(user._id);
+    this.editName.set(user.name);
+    this.editEmail.set(user.email);
+    this.editPassword.set(''); // Blank password to keep it unchanged if not specified
+  }
+
+  cancelEdit(): void {
+    this.editingId.set(null);
+  }
+
+  saveEdit(userId: string): void {
+    const data: any = {};
+    if (this.editName().trim()) data.name = this.editName().trim();
+    if (this.editEmail().trim()) data.email = this.editEmail().trim();
+    if (this.editPassword().trim()) data.password = this.editPassword().trim();
+
+    this.saving.set(true);
+    this.error.set('');
+    this.success.set('');
+
+    this.quizService.editUser(userId, data).subscribe({
+      next: () => {
+        this.success.set('HR User updated successfully!');
+        this.saving.set(false);
+        this.cancelEdit();
+        this.loadHRUsers();
+      },
+      error: (err) => {
+        this.error.set(err.error?.message || 'Failed to update HR user');
+        this.saving.set(false);
+      }
+    });
+  }
+
+  deleteHRUser(userId: string): void {
+    if (confirm('Are you sure you want to delete this HR server? This revokes access entirely.')) {
+      this.error.set('');
+      this.success.set('');
+      
+      this.quizService.deleteUser(userId).subscribe({
+        next: () => {
+          this.success.set('HR User deleted successfully!');
+          this.loadHRUsers();
+        },
+        error: (err) => {
+          this.error.set(err.error?.message || 'Failed to delete HR user');
+        }
+      });
+    }
+  }
+}

Frontend/src/app/pages/admin/manage-groups/manage-groups.html

-<div class="page-container animate-fade-in">
+<div class="page-container animate-fade-in split-view" cdkDropListGroup>
+  
+  <div class="main-workspace">
     <div class="page-header">
       <h1>Manage Groups</h1>
-    <p class="page-subtitle">Create and oversee organizational groups for candidates</p>
+      <p class="page-subtitle">Create organizational groups and effortlessly drag-and-drop candidates into them.</p>
     </div>
 
     @if (error()) {
@@ -11,52 +13,48 @@
       <div class="alert alert-success"><span class="material-symbols-rounded">check_circle</span> {{ success() }}</div>
     }
 
-  <div class="card card-padding form-card" style="margin-bottom: 40px;">
-    <h2 class="section-title">Create New Group</h2>
+    <!-- Create Group Area -->
+    <div class="card card-padding form-card" style="margin-bottom: 30px;">
+      <h2 class="section-title" style="margin-top: 0; margin-bottom: 16px;">Create New Group</h2>
       <form (ngSubmit)="createGroup()" class="group-form">
         <div class="form-group row-align">
           <div class="input-container">
             <span class="material-symbols-rounded block-icon">group_add</span>
-          <input class="form-input" [ngModel]="newGroupName()" (ngModelChange)="newGroupName.set($event)" name="groupName" placeholder="e.g., Spring Cohort 2026">
+            <input class="form-input" [ngModel]="newGroupName()" (ngModelChange)="newGroupName.set($event)" name="groupName" placeholder="e.g., Summer Interns 2026">
           </div>
           
           <button type="submit" class="btn btn-primary" [disabled]="loading() || !newGroupName().trim()">
-          @if (loading()) {
-            <span class="spinner"></span>
-          } @else {
-            <span class="material-symbols-rounded">add</span> Add Group
-          }
+            @if (loading()) { <span class="spinner"></span> } @else { <span class="material-symbols-rounded">add</span> Add Group }
           </button>
         </div>
       </form>
     </div>
 
-  <h2 class="section-title">Existing Groups</h2>
+    <h2 class="section-title">Your Groups</h2>
     @if (loadingGroups()) {
-    <div class="loading-state">
-      <div class="loader"></div>
-    </div>
+      <div class="loading-state"><div class="loader"></div></div>
     } @else if (groups().length === 0) {
       <div class="empty-state">
         <span class="material-symbols-rounded empty-icon">group_off</span>
         <h3>No groups available</h3>
-      <p>Create your first group above</p>
+        <p>Create your first grouping tier up above</p>
       </div>
     } @else {
+      <!-- Outer wrapper handles the drag contexts collectively -->
       <div class="groups-grid">
         @for (group of groups(); track group) {
-        <div class="group-card">
-          <div class="group-icon-wrapper">
-            <span class="material-symbols-rounded">group</span>
-          </div>
-          <div class="group-details" style="flex: 1;">
+          <div class="group-lane card" cdkDropList [cdkDropListData]="group" (cdkDropListDropped)="onDrop($event)" (click)="toggleGroupExpansion(group)">
+            
+            <div class="group-lane-header">
+              <div class="group-header-info">
                 @if (editingGroup() === group) {
                   <input type="text" class="form-input form-input-small" [ngModel]="editName()" (ngModelChange)="editName.set($event)" autofocus>
                 } @else {
-              <h4>{{ group }}</h4>
+                  <h4 class="lane-title"><span class="material-symbols-rounded">workspaces</span> {{ group }}</h4>
+                  <span class="member-count">{{ getStudentsInGroup(group).length }} Members</span>
                 }
               </div>
-          <div class="group-actions">
+              <div class="group-actions" (click)="$event.stopPropagation()">
                 @if (editingGroup() === group) {
                   <button class="action-btn text-success" (click)="saveEdit(group)" title="Save"><span class="material-symbols-rounded">check</span></button>
                   <button class="action-btn text-danger" (click)="cancelEdit()" title="Cancel"><span class="material-symbols-rounded">close</span></button>
@@ -66,7 +64,63 @@
                 }
               </div>
             </div>
+
+            <!-- Drop Zone Body (Displayed on Expansion) -->
+            @if (expandedGroup() === group) {
+              <div class="group-lane-body" [class.empty-body]="getStudentsInGroup(group).length === 0" (click)="$event.stopPropagation()">
+                @if (getStudentsInGroup(group).length === 0) {
+                   <div class="drop-placeholder">No candidates found in {{group}}</div>
+                }
+                
+                @for (student of getStudentsInGroup(group); track student._id) {
+                  <div class="student-pill card" cdkDrag [cdkDragData]="student">
+                     <div class="pill-avatar">{{ student.name.charAt(0).toUpperCase() }}</div>
+                     <div class="pill-info">
+                        <span class="pill-name">{{ student.name }}</span>
+                     </div>
+                     <button class="action-btn text-danger" title="Remove" (click)="removeFromGroup(student)">
+                       <span class="material-symbols-rounded" style="font-size: 16px;">close</span>
+                     </button>
+                     <div class="custom-drag-placeholder" *cdkDragPlaceholder></div>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+
+  <!-- Sidebar: Unassigned Candidates -->
+  <aside class="unassigned-sidebar card">
+    <div class="sidebar-header">
+      <div class="sidebar-title">
+         <span class="material-symbols-rounded">person_search</span>
+         <h2>Unassigned Candidates</h2>
+      </div>
+      <div class="sidebar-badge">{{ unassignedStudents().length }}</div>
+    </div>
+    
+    <div class="unassigned-list" cdkDropList [cdkDropListData]="'General'" (cdkDropListDropped)="onDrop($event)">
+       @if (unassignedStudents().length === 0) {
+          <div class="empty-unassigned">
+             <span class="material-symbols-rounded">done_all</span>
+             <p>All candidates are matched to groups!</p>
+          </div>
        }
+       @for (student of unassignedStudents(); track student._id) {
+          <div class="unassigned-card" cdkDrag [cdkDragData]="student">
+             <div class="unassigned-avatar">{{ student.name.charAt(0).toUpperCase() }}</div>
+             <div class="unassigned-details">
+                <h4>{{ student.name }}</h4>
+                <p>{{ student.email }}</p>
+             </div>
+             <span class="material-symbols-rounded drag-handle">drag_indicator</span>
+             <div class="custom-drag-placeholder" *cdkDragPlaceholder></div>
           </div>
        }
+    </div>
+  </aside>
+
 </div>

Frontend/src/app/pages/admin/manage-groups/manage-groups.ts

-import { Component, signal, OnInit } from '@angular/core';
+import { Component, signal, OnInit, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { QuizService } from '../../../services/quiz.service';
+import { DragDropModule, CdkDragDrop } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-manage-groups',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink],
+  imports: [CommonModule, FormsModule, RouterLink, DragDropModule],
   templateUrl: './manage-groups.html',
   styleUrl: './manage-groups.css'
 })
 export class ManageGroupsComponent implements OnInit {
   groups = signal<string[]>([]);
+  allStudents = signal<any[]>([]);
+  
   newGroupName = signal<string>('');
   loading = signal<boolean>(false);
   error = signal<string>('');
@@ -22,10 +25,17 @@ export class ManageGroupsComponent implements OnInit {
   editingGroup = signal<string | null>(null);
   editName = signal<string>('');
 
+  expandedGroup = signal<string | null>(null);
+
+  unassignedStudents = computed(() => {
+    return this.allStudents().filter(s => !s.group || s.group === 'General');
+  });
+
   constructor(private quizService: QuizService) {}
 
   ngOnInit(): void {
     this.loadGroups();
+    this.loadStudents();
   }
 
   loadGroups(): void {
@@ -42,6 +52,32 @@ export class ManageGroupsComponent implements OnInit {
     });
   }
 
+  loadStudents(): void {
+    this.quizService.getUsers('candidate').subscribe({
+      next: (res) => {
+        // Since getUsers('candidate') might not exist perfectly on HR route if we don't change HR route, wait, HR route has getHRCandidates
+        // Let's rely on standard getUsers which points to getBaseUrl()/users depending on role if properly set. Actually quiz.service.ts uses adminUrl directly for getUsers. Let's see. I will dynamically fetch.
+        this.allStudents.set(res.users ? res.users.filter((u:any) => u.role === 'candidate') : (res.candidates || []));
+      },
+      error: () => {}
+    });
+  }
+
+  getStudentsInGroup(groupName: string): any[] {
+    return this.allStudents().filter(s => s.group === groupName);
+  }
+
+  toggleGroupExpansion(groupName: string, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    if (this.expandedGroup() === groupName) {
+      this.expandedGroup.set(null);
+    } else {
+      this.expandedGroup.set(groupName);
+    }
+  }
+
   createGroup(): void {
     if (!this.newGroupName().trim()) {
       this.error.set('Group name cannot be blank');
@@ -89,6 +125,10 @@ export class ManageGroupsComponent implements OnInit {
         this.success.set('Group updated successfully!');
         this.cancelEdit();
         this.loadGroups();
+        // Update local students cache
+        this.allStudents.update(students => 
+           students.map(s => s.group === oldName ? { ...s, group: trimmed } : s)
+        );
       },
       error: (err) => {
         this.error.set(err.error?.message || 'Failed to update group');
@@ -97,13 +137,17 @@ export class ManageGroupsComponent implements OnInit {
   }
 
   deleteGroup(name: string): void {
-    if (confirm(`Are you sure you want to delete the group "${name}"?\nUsers dynamically mapped to this group will lose group context.`)) {
+    if (confirm(`Are you sure you want to delete the group "${name}"?\nUsers mapped to this group will moved to Unassigned.`)) {
       this.error.set('');
       this.success.set('');
       this.quizService.deleteGroup(name).subscribe({
         next: () => {
           this.success.set('Group deleted successfully!');
           this.loadGroups();
+          // Move students to General
+          this.allStudents.update(students => 
+             students.map(s => s.group === name ? { ...s, group: 'General' } : s)
+          );
         },
         error: (err) => {
           this.error.set(err.error?.message || 'Failed to delete group');
@@ -111,4 +155,39 @@ export class ManageGroupsComponent implements OnInit {
       });
     }
   }
+
+  onDrop(event: CdkDragDrop<string>) {
+    if (event.previousContainer === event.container) {
+      return; // No change
+    }
+    
+    const student = event.item.data;
+    const previousGroup = event.previousContainer.data;
+    const newGroup = event.container.data;
+
+    this.allStudents.update(students => 
+       students.map(s => s._id === student._id ? { ...s, group: newGroup } : s)
+    );
+
+    this.quizService.assignUserGroup(student._id, newGroup).subscribe({
+       next: () => {
+          // Success
+          this.success.set(``);
+       },
+       error: () => {
+          this.error.set('Failed to assign user to group');
+          this.loadStudents(); 
+       }
+    });
+  }
+
+  removeFromGroup(student: any) {
+    this.allStudents.update(students => 
+       students.map(s => s._id === student._id ? { ...s, group: 'General' } : s)
+    );
+    this.quizService.assignUserGroup(student._id, 'General').subscribe({
+       next: () => {},
+       error: () => this.loadStudents()
+    });
+  }
 }

Frontend/src/app/pages/admin/submission-detail/submission-detail.css

-.dashboard-layout { display: flex; min-height: 100vh; background: #0f1117; }
-.sidebar { width: 260px; background: rgba(255,255,255,0.03); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; padding: 24px 16px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; }
-.sidebar-header { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 32px; flex-wrap: wrap; }
-.sidebar-header .logo-icon { font-size: 28px; }
-.sidebar-header h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
-.role-badge { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; }
-.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
-.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }
-.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
-.nav-item.active { background: rgba(102,126,234,0.15); color: #667eea; }
-.nav-icon { font-size: 18px; }
-.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; }
-.user-info { display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 12px; }
-.user-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
-.user-details { display: flex; flex-direction: column; }
-.user-name { color: #fff; font-size: 13px; font-weight: 600; }
-.user-email { color: rgba(255,255,255,0.4); font-size: 11px; }
-.logout-btn { width: 100%; padding: 10px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: 10px; color: #f87171; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
-.logout-btn:hover { background: rgba(239,68,68,0.2); }
-
-.main-content { flex: 1; margin-left: 260px; padding: 40px; }
+.page-container {
+  padding: 32px 40px;
+  max-width: 1400px;
+}
 
 .loading-state { display: flex; flex-direction: column; align-items: center; padding: 80px 0; gap: 16px; }
-.loader { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #667eea; border-radius: 50%; animation: spin 0.8s linear infinite; }
+.loader { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: #667eea; border-radius: 50%; animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.loading-state p { color: rgba(255,255,255,0.5); }
+.loading-state p { color: var(--text-secondary); }
 
 .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
 .breadcrumb a { color: #667eea; text-decoration: none; font-size: 14px; font-weight: 500; }
 .breadcrumb a:hover { color: #8b9cf7; }
-.breadcrumb span { color: rgba(255,255,255,0.3); font-size: 13px; }
-.breadcrumb .current { color: rgba(255,255,255,0.7); }
+.breadcrumb span { color: var(--text-muted); font-size: 13px; }
+.breadcrumb .current { color: var(--text-primary); font-weight: 600; }
 
 .score-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 36px; }
 .score-card {
-  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
+  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
   padding: 20px; display: flex; flex-direction: column; gap: 8px;
 }
-.score-label { color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
-.score-value { color: #fff; font-size: 24px; font-weight: 700; }
+.score-label { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+.score-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
 .score-value.small { font-size: 14px; }
-.score-value.good { color: #4ade80; }
-.score-value.avg { color: #fbbf24; }
-.score-value.poor { color: #f87171; }
+.score-value.good { color: var(--success); }
+.score-value.avg { color: var(--warning); }
+.score-value.poor { color: var(--danger); }
 
-.section-title { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 20px; }
+.section-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--text-primary); }
 
 .questions-list { display: flex; flex-direction: column; gap: 20px; }
 .question-card {
-  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
+  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
   padding: 24px; transition: all 0.2s;
 }
-.question-card.correct { border-left: 4px solid #4ade80; }
-.question-card.wrong { border-left: 4px solid #f87171; }
+.question-card.correct { border-left: 4px solid var(--success); }
+.question-card.wrong { border-left: 4px solid var(--danger); }
 
 .q-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
-.q-number { background: rgba(102,126,234,0.15); color: #667eea; padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; }
-.q-type-badge { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+.q-number { background: rgba(102,126,234,0.15); color: var(--accent-primary); padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; }
+.q-type-badge { background: var(--bg-input); color: var(--text-secondary); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
 .q-status { margin-left: auto; font-weight: 600; font-size: 13px; }
-.q-status.correct { color: #4ade80; }
-.q-status:not(.correct) { color: #f87171; }
+.q-status.correct { color: var(--success); }
+.q-status:not(.correct) { color: var(--danger); }
 
-.q-text { color: #fff; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
+.q-text { font-size: 15px; line-height: 1.6; margin: 0 0 16px; color: var(--text-primary); }
 
 .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .option {
-  padding: 12px 16px; border-radius: 10px; font-size: 14px; color: rgba(255,255,255,0.7);
-  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
+  padding: 12px 16px; border-radius: 10px; font-size: 14px; color: var(--text-primary);
+  background: var(--bg-input); border: 1px solid var(--border-color);
   display: flex; align-items: center; gap: 8px;
 }
-.option.correct-answer { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: #4ade80; }
-.option.wrong-answer { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; }
-.option.student-answer:not(.wrong-answer) { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: #4ade80; }
+.option.correct-answer { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: var(--success); }
+.option.wrong-answer { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: var(--danger); }
+.option.student-answer:not(.wrong-answer) { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: var(--success); }
 .option-marker { font-weight: 700; font-size: 16px; }
 
 @media (max-width: 768px) {
-  .sidebar { width: 100%; position: relative; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
-  .main-content { margin-left: 0; padding: 24px; }
-  .dashboard-layout { flex-direction: column; }
+  .page-container { padding: 24px 16px; }
   .options-grid { grid-template-columns: 1fr; }
   .score-summary { grid-template-columns: 1fr 1fr; }
 }

Frontend/src/app/pages/admin/submission-detail/submission-detail.html

-<div class="dashboard-layout">
-  <aside class="sidebar">
-    <div class="sidebar-header">
-      <span class="logo-icon">📝</span><h2>QuizMaster</h2><span class="role-badge">Admin</span>
-    </div>
-    <nav class="sidebar-nav">
-      <a routerLink="/admin/dashboard" class="nav-item"><span class="nav-icon">🏠</span><span>Dashboard</span></a>
-      <a routerLink="/admin/users" class="nav-item active"><span class="nav-icon">👥</span><span>Users</span></a>
-      <a routerLink="/admin/generate-quiz" class="nav-item"><span class="nav-icon">➕</span><span>Generate Quiz</span></a>
-    </nav>
-    <div class="sidebar-footer">
-      <div class="user-info">
-        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'A' }}</div>
-        <div class="user-details"><span class="user-name">{{ authService.currentUser()?.name }}</span><span class="user-email">{{ authService.currentUser()?.email }}</span></div>
-      </div>
-      <button class="logout-btn" (click)="logout()"><span>🚪</span> Logout</button>
-    </div>
-  </aside>
-
-  <main class="main-content">
+<div class="page-container animate-fade-in">
     @if (loading()) {
       <div class="loading-state"><div class="loader"></div><p>Loading details...</p></div>
     } @else if (submission()) {
@@ -76,5 +57,4 @@
         }
       </div>
     }
-  </main>
 </div>

Frontend/src/app/pages/admin/user-history/user-history.css

-.dashboard-layout {
-  display: flex;
-  min-height: 100vh;
-  background: var(--bg-secondary);
-}
-
-.sidebar {
-  width: 260px;
-  background: var(--bg-card);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  padding: 24px 16px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 10;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 8px;
-  margin-bottom: 32px;
-  flex-wrap: wrap;
-}
-
-.sidebar-header .logo-icon {
-  font-size: 28px;
-}
-
-.sidebar-header h2 {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.role-badge {
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  color: var(--text-primary);
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 20px;
-  text-transform: uppercase;
-}
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: 12px;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.nav-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-primary);
-}
-
-.nav-item.active {
-  background: rgba(102, 126, 234, 0.15);
-  color: #667eea;
-}
-
-.nav-icon {
-  font-size: 18px;
-}
-
-.sidebar-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  padding-top: 16px;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  margin-bottom: 12px;
-}
-
-.user-avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-primary);
-  font-weight: 700;
-  font-size: 16px;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-name {
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.user-email {
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 11px;
-}
-
-.logout-btn {
-  width: 100%;
-  padding: 10px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: 10px;
-  color: #f87171;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-family: inherit;
-}
-
-.logout-btn:hover {
-  background: rgba(239, 68, 68, 0.2);
-}
-
-.main-content {
-  flex: 1;
-  margin-left: 0px;
-  padding: 24px 32px;
+.page-container {
+  padding: 32px 40px;
+  max-width: 1400px;
 }
 
 .breadcrumb {
@@ -262,7 +113,7 @@
 .history-table-wrap {
   overflow-x: auto;
   border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-color);
 }
 
 .history-table {
@@ -286,7 +137,7 @@
 
 .history-table td {
   padding: 16px 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: 14px;
 }
@@ -296,12 +147,11 @@
 }
 
 .history-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--bg-hover);
 }
 
 .quiz-name {
   font-weight: 600;
-  color: #fff !important;
 }
 
 .score-badge {
@@ -316,7 +166,7 @@
 .percent-bar {
   width: 80px;
   height: 6px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-input);
   border-radius: 3px;
   overflow: hidden;
   display: inline-block;
@@ -360,20 +210,8 @@
 }
 
 @media (max-width: 768px) {
-  .sidebar {
-    width: 100%;
-    position: relative;
-    border-right: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
-
-  .main-content {
-    margin-left: 0;
-    padding: 24px;
-  }
-
-  .dashboard-layout {
-    flex-direction: column;
+  .page-container {
+    padding: 24px 16px;
   }
 }
 

Frontend/src/app/pages/admin/user-history/user-history.html

-
-
-  <main class="main-content">
+<div class="page-container animate-fade-in">
   <div class="content-wrapper">
-
     <div class="breadcrumb">
       <a routerLink="/admin/users">← Back to Users</a>
     </div>
@@ -70,6 +67,5 @@
         </div>
       }
     }
-            
   </div>
-  </main>
\ No newline at end of file
+</div>
\ No newline at end of file

Frontend/src/app/pages/admin/users/users.css

-.dashboard-layout {
-  display: flex;
-  min-height: 100vh;
-  background: var(--bg-secondary);
-}
-
-.sidebar {
-  width: 260px;
-  background: var(--bg-card);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  padding: 24px 16px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 10;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 8px;
-  margin-bottom: 32px;
-  flex-wrap: wrap;
-}
-
-.sidebar-header .logo-icon {
-  font-size: 28px;
-}
-
-.sidebar-header h2 {
-  font-size: 20px;
-  font-weight: 700;
-color: var(--text-primary);
-  margin: 0;
-}
-
-.role-badge {
-  background: linear-gradient(135deg, #667eea, #764ba2);
-color: var(--text-primary);
-  font-size: 11px;
-  font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 20px;
-  text-transform: uppercase;
-}
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: 12px;
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.nav-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-color: var(--text-primary);
-}
-
-.nav-item.active {
-  background: rgba(102, 126, 234, 0.15);
-  color: var(--text-secondary);
-}
-
-.nav-icon {
-  font-size: 18px;
-}
-
-.sidebar-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  padding-top: 16px;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-  margin-bottom: 12px;
-}
-
-.user-avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-color: var(--text-primary);
-  font-weight: 700;
-  font-size: 16px;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-name {
-color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.user-email {
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 11px;
-}
-
-.logout-btn {
-  width: 100%;
-  padding: 10px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: 10px;
-  color: #f87171;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-family: inherit;
-}
-
-.logout-btn:hover {
-  background: rgba(239, 68, 68, 0.2);
-}
-
-.main-content {
-  flex: 1;
-  margin-left: 0px;
-  padding: 40px;
+.page-container {
+  padding: 32px 40px;
+  max-width: 1400px;
 }
 
 .page-header {
@@ -337,21 +188,33 @@ color: var(--text-secondary);
   transform: translateX(4px);
 }
 
-@media (max-width: 768px) {
-  .sidebar {
-    width: 100%;
-    position: relative;
-  border-right: 1px solid var(--border-color);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.action-btn {
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-left: 8px;
+}
 
-  .main-content {
-    margin-left: 0;
-    padding: 24px;
-  }
+.action-btn .material-symbols-rounded {
+  font-size: 20px;
+}
 
-  .dashboard-layout {
-    flex-direction: column;
+.text-danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 24px 16px;
   }
 
   .users-grid {

Frontend/src/app/pages/admin/users/users.html

-<div class="dashboard-layout">
-  <aside class="sidebar">
-    <div class="sidebar-header">
-      <span class="logo-icon">📝</span>
-      <h2>QuizMaster</h2>
-      <span class="role-badge">Admin</span>
-    </div>
-    <nav class="sidebar-nav">
-      <a routerLink="/admin/dashboard" class="nav-item">
-        <span class="nav-icon">🏠</span><span>Dashboard</span>
-      </a>
-      <a routerLink="/admin/users" class="nav-item active">
-        <span class="nav-icon">👥</span><span>Users</span>
-      </a>
-      <a routerLink="/admin/generate-quiz" class="nav-item">
-        <span class="nav-icon">➕</span><span>Generate Quiz</span>
-      </a>
-    </nav>
-    <div class="sidebar-footer">
-      <div class="user-info">
-        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'A' }}</div>
-        <div class="user-details">
-          <span class="user-name">{{ authService.currentUser()?.name }}</span>
-          <span class="user-email">{{ authService.currentUser()?.email }}</span>
-        </div>
-      </div>
-      <button class="logout-btn" (click)="logout()"><span>🚪</span> Logout</button>
-    </div>
-  </aside>
-
-  <main class="main-content">
+<div class="page-container animate-fade-in">
     <div class="page-header">
       <h1>Student Users</h1>
       <p>View and manage registered students</p>
@@ -61,10 +31,14 @@
               <span class="user-joined">Joined {{ user.createdAt | date:'mediumDate' }}</span>
             </div>
             <div class="status-dot" [class.online]="user.isLoggedIn"></div>
+            
+            <button class="action-btn text-danger ml-auto" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
+              <span class="material-symbols-rounded">delete</span>
+            </button>
+            
             <span class="view-arrow">→</span>
           </a>
         }
       </div>
     }
-  </main>
 </div>

Frontend/src/app/pages/admin/users/users.ts

@@ -24,10 +24,11 @@ export class AdminUsersComponent implements OnInit {
 
   loadUsers(): void {
     this.loading.set(true);
-    const request = this.showAll() ? this.quizService.getUsers() : this.quizService.getLoggedInUsers();
+    const request = this.showAll() ? this.quizService.getUsers('candidate') : this.quizService.getLoggedInUsers();
     request.subscribe({
       next: (res) => {
-        this.users.set(res.users);
+        const filtered = res.users.filter((u: any) => u.role === 'candidate');
+        this.users.set(filtered);
         this.loading.set(false);
       },
       error: () => this.loading.set(false)
@@ -39,6 +40,20 @@ export class AdminUsersComponent implements OnInit {
     this.loadUsers();
   }
 
+  deleteUser(userId: string): void {
+    if (confirm('Are you sure you want to permanently delete this student user?')) {
+      this.quizService.deleteUser(userId).subscribe({
+        next: () => {
+          this.loadUsers();
+        },
+        error: (err) => {
+          console.error('Failed to delete user', err);
+          alert('Failed to delete student user.');
+        }
+      });
+    }
+  }
+
   logout(): void {
     this.authService.logout();
   }

Frontend/src/app/pages/register/register.html

@@ -76,24 +76,7 @@
           </div>
         </div>
 
-        @if (availableGroups().length > 0) {
-        <div class="field">
-          <label for="group">Student Group (Optional)</label>
-          <div class="input-group">
-            <span class="material-symbols-rounded input-icon">group</span>
-            <select
-              id="group"
-              [(ngModel)]="group"
-              name="group"
-            >
-              <option value="" disabled selected>Select your group</option>
-              @for (grp of availableGroups(); track grp) {
-                <option [value]="grp">{{ grp }}</option>
-              }
-            </select>
-          </div>
-        </div>
-        }
+
 
         <div class="fields-row">
           <div class="field">

Frontend/src/app/pages/register/register.ts

-import { Component, signal, OnInit } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -11,24 +11,16 @@ import { AuthService } from '../../services/auth.service';
   templateUrl: './register.html',
   styleUrl: './register.css'
 })
-export class RegisterComponent implements OnInit {
+export class RegisterComponent {
   name = '';
   email = '';
   password = '';
   confirmPassword = '';
-  group = '';
-  availableGroups = signal<string[]>([]);
-  error = signal<string>('');
-  loading = signal<boolean>(false);
   
-  constructor(private authService: AuthService, private router: Router) {}
+  loading = signal(false);
+  error = signal('');
 
-  ngOnInit(): void {
-    this.authService.getRegistrationGroups().subscribe({
-      next: (res) => this.availableGroups.set(res.groups || []),
-      error: () => console.error('Failed to load groups for registration')
-    });
-  }
+  constructor(private authService: AuthService, private router: Router) {}
 
   onSubmit(): void {
     if (!this.name || !this.email || !this.password || !this.confirmPassword) {
@@ -41,23 +33,17 @@ export class RegisterComponent implements OnInit {
       return;
     }
 
-    if (this.password.length < 6) {
-      this.error.set('Password must be at least 6 characters');
-      return;
-    }
-
     this.loading.set(true);
     this.error.set('');
 
-    this.authService.register(this.name, this.email, this.password, this.group).subscribe({
+    this.authService.register(this.name, this.email, this.password, 'General').subscribe({
       next: () => {
         this.loading.set(false);
-        alert('Registration successful! Please sign in.');
         this.router.navigate(['/login']);
       },
       error: (err) => {
+        this.error.set(err.error?.message || 'Registration failed');
         this.loading.set(false);
-        this.error.set(err.error?.message || 'Registration failed. Please try again.');
       }
     });
   }

Frontend/src/app/services/quiz.service.ts

@@ -35,6 +35,10 @@
       return this.http.delete(`${this.adminUrl}/users/${userId}`);
     }
 
+    editUser(userId: string, data: { name?: string; email?: string; password?: string }): Observable<any> {
+      return this.http.put(`${this.adminUrl}/users/${userId}`, data);
+    }
+
     getUserHistory(userId: string): Observable<any> {
       return this.http.get(`${this.adminUrl}/users/${userId}/history`);
     }
@@ -179,4 +183,8 @@
     deleteGroup(name: string): Observable<any> {
       return this.http.delete(`${this.getBaseUrl()}/groups/${encodeURIComponent(name)}`);
     }
+
+    assignUserGroup(userId: string, groupName: string): Observable<any> {
+      return this.http.put(`${this.getBaseUrl()}/users/${userId}/group`, { group: groupName });
+    }
   }