fix

frontend/static/js/app.js

@@ -89,7 +89,7 @@ async function authFetch(url, options = {}) {
         ...options.headers,
         "Authorization": `Bearer ${token}`
     };
-    
+
     const res = await fetch(url, { ...options, headers });
     if (res.status === 401) {
         logoutBtn.click();
@@ -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/`);
@@ -170,12 +195,12 @@ userForm.addEventListener("submit", async (e) => {
                 body: JSON.stringify(data)
             });
         }
-        
+
         if (!res.ok) {
             const err = await res.json();
             throw new Error(err.detail);
         }
-        
+
         closeModal("user-modal");
         loadUsers();
     } catch (err) {
@@ -222,12 +247,12 @@ appForm.addEventListener("submit", async (e) => {
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ name, url })
         });
-        
+
         if (!res.ok) {
             const err = await res.json();
             throw new Error(err.detail);
         }
-        
+
         closeModal("app-modal");
         loadApps();
     } catch (err) {
@@ -238,14 +263,14 @@ appForm.addEventListener("submit", async (e) => {
 // Assign App
 window.assignAppModal = async (userId) => {
     document.getElementById("assign-user-id").value = userId;
-    
+
     // Load apps for select
     const res = await authFetch(`${API_URL}/apps/`);
     const apps = await res.json();
     const select = document.getElementById("assign-app-select");
-    select.innerHTML = '<option value="">Select Application</option>' + 
+    select.innerHTML = '<option value="">Select Application</option>' +
         apps.map(app => `<option value="${app.id}">${app.name}</option>`).join("");
-        
+
     openModal("assign-modal");
 };
 
@@ -259,9 +284,9 @@ assignForm.addEventListener("submit", async (e) => {
         const res = await authFetch(`${API_URL}/users/${userId}/assign/${appId}`, {
             method: "POST"
         });
-        
+
         if (!res.ok) throw new Error("Failed to assign");
-        
+
         closeModal("assign-modal");
         alert("Assigned successfully");
     } catch (err) {