fix

backend/routers/users.py

@@ -84,3 +84,17 @@ async def assign_app_to_user(user_id: int, app_id: int, db: Session = Depends(da
     db.add(new_assignment)
     db.commit()
     return {"message": "Assigned successfully"}
+
+@router.delete("/{user_id}/assign/{app_id}")
+async def remove_app_assignment(user_id: int, app_id: int, db: Session = Depends(database.get_db)):
+    assignment = db.query(models.UserApplication).filter(
+        models.UserApplication.user_id == user_id,
+        models.UserApplication.application_id == app_id
+    ).first()
+    
+    if not assignment:
+        raise HTTPException(status_code=404, detail="Assignment not found")
+        
+    db.delete(assignment)
+    db.commit()
+    return {"message": "Assignment removed"}

frontend/index.html

@@ -48,19 +48,6 @@
                 </div>
                 <div class="card">
                     <table id="users-table">
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>Username</th>
-                                <th>Email</th>
-                                <th>Admin</th>
-                                <th>Active</th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <!-- Users will be populated here -->
-                        </tbody>
                     </table>
                 </div>
             </section>

frontend/static/js/app.js

@@ -102,21 +102,46 @@ async function authFetch(url, options = {}) {
 async function loadUsers() {
     const res = await authFetch(`${API_URL}/users/`);
     const users = await res.json();
-    usersTableBody.innerHTML = users.map(user => `
+    usersTableBody.innerHTML = users.map(user => {
+        const appsList = user.applications.map(ua =>
+            `<span class="badge badge-info" style="margin-right: 5px; display: inline-flex; align-items: center;">
+                ${ua.application.name}
+                <button onclick="removeAppAssignment(${user.id}, ${ua.application.id})" style="margin-left: 5px; color: red; font-weight: bold; border: none; background: none; cursor: pointer;">&times;</button>
+             </span>`
+        ).join("");
+
+        return `
         <tr>
             <td>${user.id}</td>
             <td>${user.username}</td>
             <td>${user.email}</td>
             <td>${user.is_admin ? "Yes" : "No"}</td>
             <td>${user.is_active ? "Yes" : "No"}</td>
+            <td>${appsList}</td>
             <td>
                 <button class="btn btn-secondary" onclick='editUser(${JSON.stringify(user)})'>Edit</button>
                 <button class="btn btn-primary" onclick='assignAppModal(${user.id})'>Assign App</button>
             </td>
         </tr>
-    `).join("");
+    `}).join("");
 }
 
+window.removeAppAssignment = async (userId, appId) => {
+    if (!confirm("Are you sure you want to remove this app assignment?")) return;
+
+    try {
+        const res = await authFetch(`${API_URL}/users/${userId}/assign/${appId}`, {
+            method: "DELETE"
+        });
+
+        if (!res.ok) throw new Error("Failed to remove assignment");
+
+        loadUsers();
+    } catch (err) {
+        alert(err.message);
+    }
+};
+
 // Apps
 async function loadApps() {
     const res = await authFetch(`${API_URL}/apps/`);