From 1f1fd908907fd633ea42ee74c6058cdd704214c9 Mon Sep 17 00:00:00 2001
From: domrichardson <100129001+domrichardson@users.noreply.github.com>
Date: Wed, 25 Mar 2026 14:11:39 +0000
Subject: [PATCH] feat: Updated admin panel styles

---
 backend/cmd/server/main.go                    |   5 +
 .../application/services/admin_service.go     | 114 ++++++
 .../interfaces/handlers/admin_handler.go      |  60 +++
 frontend/src/components/AdminGroupModal.vue   | 125 ++++++
 frontend/src/components/AdminSpaceModal.vue   |  33 +-
 frontend/src/components/AdminUserModal.vue    | 111 ++++++
 frontend/src/pages/Admin.vue                  | 364 ++++++++++++------
 frontend/src/utils/markdown.js                |  19 +-
 8 files changed, 700 insertions(+), 131 deletions(-)
 create mode 100644 frontend/src/components/AdminGroupModal.vue
 create mode 100644 frontend/src/components/AdminUserModal.vue

diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index b355431..ea97bd7 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -117,6 +117,8 @@ func main() {
 	adminService := services.NewAdminService(
 		db.UserRepo,
 		db.GroupRepo,
+		db.ProviderRepo,
+		db.LinkRepo,
 		db.SpaceRepo,
 		db.MembershipRepo,
 		db.NoteRepo,
@@ -255,10 +257,12 @@ func main() {
 		})
 	})
 	admin.HandleFunc("/users", adminHandler.ListUsers).Methods("GET")
+	admin.HandleFunc("/users/{userId}", adminHandler.DeleteUser).Methods("DELETE")
 	admin.HandleFunc("/users/{userId}/groups", adminHandler.UpdateUserGroups).Methods("PUT")
 	admin.HandleFunc("/groups", adminHandler.ListGroups).Methods("GET")
 	admin.HandleFunc("/groups", adminHandler.CreateGroup).Methods("POST")
 	admin.HandleFunc("/groups/{groupId}", adminHandler.UpdateGroup).Methods("PUT")
+	admin.HandleFunc("/groups/{groupId}", adminHandler.DeleteGroup).Methods("DELETE")
 	admin.HandleFunc("/spaces", adminHandler.ListAllSpaces).Methods("GET")
 	admin.HandleFunc("/spaces/{spaceId}", adminHandler.UpdateSpace).Methods("PUT")
 	admin.HandleFunc("/spaces/{spaceId}", adminHandler.DeleteSpace).Methods("DELETE")
@@ -270,6 +274,7 @@ func main() {
 	admin.HandleFunc("/feature-flags", adminHandler.UpdateFeatureFlags).Methods("PUT")
 	// manage identity providers — admin-only
 	admin.HandleFunc("/auth/providers", authHandler.CreateProvider).Methods("POST")
+	admin.HandleFunc("/auth/providers/{providerId}", adminHandler.DeleteProvider).Methods("DELETE")
 
 	// Serve static files (frontend) for all other routes
 	// This must be after all API route handlers to allow API routes to take precedence
diff --git a/backend/internal/application/services/admin_service.go b/backend/internal/application/services/admin_service.go
index c78b713..dabbd02 100644
--- a/backend/internal/application/services/admin_service.go
+++ b/backend/internal/application/services/admin_service.go
@@ -17,6 +17,8 @@ import (
 type AdminService struct {
 	userRepo          repositories.UserRepository
 	groupRepo         repositories.GroupRepository
+	providerRepo      repositories.AuthProviderRepository
+	linkRepo          repositories.UserProviderLinkRepository
 	spaceRepo         repositories.SpaceRepository
 	membershipRepo    repositories.MembershipRepository
 	noteRepo          repositories.NoteRepository
@@ -30,6 +32,8 @@ type AdminService struct {
 func NewAdminService(
 	userRepo repositories.UserRepository,
 	groupRepo repositories.GroupRepository,
+	providerRepo repositories.AuthProviderRepository,
+	linkRepo repositories.UserProviderLinkRepository,
 	spaceRepo repositories.SpaceRepository,
 	membershipRepo repositories.MembershipRepository,
 	noteRepo repositories.NoteRepository,
@@ -41,6 +45,8 @@ func NewAdminService(
 	return &AdminService{
 		userRepo:          userRepo,
 		groupRepo:         groupRepo,
+		providerRepo:      providerRepo,
+		linkRepo:          linkRepo,
 		spaceRepo:         spaceRepo,
 		membershipRepo:    membershipRepo,
 		noteRepo:          noteRepo,
@@ -51,6 +57,114 @@ func NewAdminService(
 	}
 }
 
+// DeleteUser deletes a user and related memberships/provider links.
+func (s *AdminService) DeleteUser(ctx context.Context, currentUserID, targetUserID bson.ObjectID) error {
+	if currentUserID == targetUserID {
+		return errors.New("you cannot delete your own account")
+	}
+
+	spaces, err := s.spaceRepo.GetAllSpaces(ctx)
+	if err != nil {
+		return err
+	}
+	for _, space := range spaces {
+		if space.OwnerID == targetUserID {
+			return errors.New("cannot delete user that owns spaces; transfer or delete spaces first")
+		}
+	}
+
+	memberships, err := s.membershipRepo.GetUserMemberships(ctx, targetUserID)
+	if err == nil {
+		for _, membership := range memberships {
+			if err := s.membershipRepo.DeleteMembership(ctx, membership.ID); err != nil {
+				return err
+			}
+		}
+	}
+
+	if s.linkRepo != nil {
+		links, err := s.linkRepo.GetUserLinks(ctx, targetUserID)
+		if err == nil {
+			for _, link := range links {
+				if err := s.linkRepo.DeleteLink(ctx, link.ID); err != nil {
+					return err
+				}
+			}
+		}
+	}
+
+	return s.userRepo.DeleteUser(ctx, targetUserID)
+}
+
+// DeleteGroup deletes a non-system group and removes it from users.
+func (s *AdminService) DeleteGroup(ctx context.Context, groupID bson.ObjectID) error {
+	group, err := s.groupRepo.GetGroupByID(ctx, groupID)
+	if err != nil {
+		return err
+	}
+	if group.IsSystem {
+		return errors.New("system groups cannot be deleted")
+	}
+
+	users, err := s.userRepo.ListAllUsers(ctx)
+	if err != nil {
+		return err
+	}
+	for _, user := range users {
+		filtered := make([]bson.ObjectID, 0, len(user.GroupIDs))
+		changed := false
+		for _, assignedGroupID := range user.GroupIDs {
+			if assignedGroupID == groupID {
+				changed = true
+				continue
+			}
+			filtered = append(filtered, assignedGroupID)
+		}
+		if !changed {
+			continue
+		}
+		user.GroupIDs = filtered
+		if err := s.userRepo.UpdateUser(ctx, user); err != nil {
+			return err
+		}
+	}
+
+	if err := s.groupRepo.DeleteGroup(ctx, groupID); err != nil {
+		return err
+	}
+
+	return s.refreshAllUserPermissions(ctx)
+}
+
+// DeleteProvider deletes an auth provider and all user-provider links connected to it.
+func (s *AdminService) DeleteProvider(ctx context.Context, providerID bson.ObjectID) error {
+	if s.providerRepo == nil {
+		return errors.New("provider repository unavailable")
+	}
+
+	if s.linkRepo != nil {
+		users, err := s.userRepo.ListAllUsers(ctx)
+		if err != nil {
+			return err
+		}
+		for _, user := range users {
+			links, err := s.linkRepo.GetUserLinks(ctx, user.ID)
+			if err != nil {
+				continue
+			}
+			for _, link := range links {
+				if link.ProviderID == providerID {
+					if err := s.linkRepo.DeleteLink(ctx, link.ID); err != nil {
+						return err
+					}
+				}
+			}
+		}
+	}
+
+	return s.providerRepo.DeleteProvider(ctx, providerID)
+}
+
 // ListUsers returns all users as admin DTOs
 func (s *AdminService) ListUsers(ctx context.Context) ([]*dto.AdminUserDTO, error) {
 	users, err := s.userRepo.ListAllUsers(ctx)
diff --git a/backend/internal/interfaces/handlers/admin_handler.go b/backend/internal/interfaces/handlers/admin_handler.go
index e0a990e..1f8e986 100644
--- a/backend/internal/interfaces/handlers/admin_handler.go
+++ b/backend/internal/interfaces/handlers/admin_handler.go
@@ -5,6 +5,7 @@ import (
 	"net/http"
 
 	"github.com/gorilla/mux"
+	"github.com/noteapp/backend/internal/interfaces/middleware"
 	"go.mongodb.org/mongo-driver/v2/bson"
 
 	"github.com/noteapp/backend/internal/application/dto"
@@ -32,6 +33,33 @@ func (h *AdminHandler) ListUsers(w http.ResponseWriter, r *http.Request) {
 	json.NewEncoder(w).Encode(map[string]interface{}{"users": users})
 }
 
+// DeleteUser handles DELETE /admin/users/{userId}
+func (h *AdminHandler) DeleteUser(w http.ResponseWriter, r *http.Request) {
+	targetUserID, err := bson.ObjectIDFromHex(mux.Vars(r)["userId"])
+	if err != nil {
+		http.Error(w, "invalid user id", http.StatusBadRequest)
+		return
+	}
+
+	currentUserIDHex, err := middleware.GetUserIDFromContext(r.Context())
+	if err != nil {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+	currentUserID, err := bson.ObjectIDFromHex(currentUserIDHex)
+	if err != nil {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	if err := h.adminService.DeleteUser(r.Context(), currentUserID, targetUserID); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}
+
 // UpdateUserGroups handles PUT /admin/users/{userId}/groups
 func (h *AdminHandler) UpdateUserGroups(w http.ResponseWriter, r *http.Request) {
 	userID, err := bson.ObjectIDFromHex(mux.Vars(r)["userId"])
@@ -66,6 +94,22 @@ func (h *AdminHandler) UpdateUserGroups(w http.ResponseWriter, r *http.Request)
 	json.NewEncoder(w).Encode(user)
 }
 
+// DeleteGroup handles DELETE /admin/groups/{groupId}
+func (h *AdminHandler) DeleteGroup(w http.ResponseWriter, r *http.Request) {
+	groupID, err := bson.ObjectIDFromHex(mux.Vars(r)["groupId"])
+	if err != nil {
+		http.Error(w, "invalid group id", http.StatusBadRequest)
+		return
+	}
+
+	if err := h.adminService.DeleteGroup(r.Context(), groupID); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}
+
 // ListGroups handles GET /admin/groups
 func (h *AdminHandler) ListGroups(w http.ResponseWriter, r *http.Request) {
 	groups, err := h.adminService.ListGroups(r.Context())
@@ -292,3 +336,19 @@ func (h *AdminHandler) UpdateFeatureFlags(w http.ResponseWriter, r *http.Request
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(flags)
 }
+
+// DeleteProvider handles DELETE /admin/auth/providers/{providerId}
+func (h *AdminHandler) DeleteProvider(w http.ResponseWriter, r *http.Request) {
+	providerID, err := bson.ObjectIDFromHex(mux.Vars(r)["providerId"])
+	if err != nil {
+		http.Error(w, "invalid provider id", http.StatusBadRequest)
+		return
+	}
+
+	if err := h.adminService.DeleteProvider(r.Context(), providerID); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}
diff --git a/frontend/src/components/AdminGroupModal.vue b/frontend/src/components/AdminGroupModal.vue
new file mode 100644
index 0000000..557b658
--- /dev/null
+++ b/frontend/src/components/AdminGroupModal.vue
@@ -0,0 +1,125 @@
+<template>
+    <teleport to="body">
+        <div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
+            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">{{ mode === "create" ? "Create Group" : "Edit Group" }}</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"></button>
+                    </div>
+                    <form @submit.prevent="handleSubmit">
+                        <div class="modal-body">
+                            <div class="mb-3">
+                                <label class="form-label">Group name</label>
+                                <input v-model="form.name" class="form-control" type="text" required :disabled="isSystemGroup" />
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label">Description</label>
+                                <input v-model="form.description" class="form-control" type="text" :disabled="isSystemGroup" />
+                            </div>
+
+                            <div>
+                                <label class="form-label">Permissions (one per line)</label>
+                                <textarea
+                                    v-model="form.permissionsText"
+                                    class="form-control permissions-textarea"
+                                    rows="10"
+                                    placeholder="space.create&#10;space.project_docs.category.create&#10;space.project_docs.*"
+                                    :disabled="isSystemGroup"
+                                ></textarea>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-outline-secondary" @click="emit('close')">Cancel</button>
+                            <button v-if="!isSystemGroup" type="submit" class="btn btn-primary" :disabled="submitting">
+                                {{ submitting ? "Saving..." : mode === "create" ? "Create Group" : "Save Changes" }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="modal-backdrop fade show admin-modal-backdrop"></div>
+    </teleport>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+    mode: {
+        type: String,
+        default: "create",
+    },
+    group: {
+        type: Object,
+        default: null,
+    },
+    isSystemGroup: {
+        type: Boolean,
+        default: false,
+    },
+    submitting: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["close", "submit"]);
+
+const form = ref({
+    name: "",
+    description: "",
+    permissionsText: "",
+});
+
+const hydrateForm = () => {
+    form.value = {
+        name: props.group?.name || "",
+        description: props.group?.description || "",
+        permissionsText: (props.group?.permissions || []).join("\n"),
+    };
+};
+
+watch(() => [props.mode, props.group], hydrateForm, { immediate: true });
+
+const handleSubmit = () => {
+    emit("submit", {
+        name: form.value.name,
+        description: form.value.description,
+        permissionsText: form.value.permissionsText,
+    });
+};
+</script>
+
+<style scoped>
+.admin-modal {
+    z-index: 2000;
+    overflow-y: auto;
+    padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+
+.admin-modal-backdrop {
+    z-index: 1990;
+}
+
+.admin-modal .modal-dialog {
+    margin: 1rem auto;
+}
+
+.permissions-textarea {
+    font-family: "Courier New", monospace;
+}
+
+@media (max-width: 767.98px) {
+    .admin-modal {
+        padding-top: max(0.75rem, env(safe-area-inset-top));
+    }
+
+    .admin-modal .modal-dialog {
+        margin: 0.75rem;
+        max-width: none;
+    }
+}
+</style>
diff --git a/frontend/src/components/AdminSpaceModal.vue b/frontend/src/components/AdminSpaceModal.vue
index 2ff9820..d8864f7 100644
--- a/frontend/src/components/AdminSpaceModal.vue
+++ b/frontend/src/components/AdminSpaceModal.vue
@@ -1,7 +1,7 @@
 <template>
     <teleport to="body">
-        <div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
-            <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
+        <div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
+            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Edit Space</h5>
@@ -96,7 +96,7 @@
                 </div>
             </div>
         </div>
-        <div class="modal-backdrop fade show"></div>
+        <div class="modal-backdrop fade show admin-modal-backdrop"></div>
     </teleport>
 </template>
 
@@ -252,3 +252,30 @@ const deleteSpace = async () => {
     }
 };
 </script>
+
+<style scoped>
+.admin-modal {
+    z-index: 2000;
+    overflow-y: auto;
+    padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+
+.admin-modal-backdrop {
+    z-index: 1990;
+}
+
+.admin-modal .modal-dialog {
+    margin: 1rem auto;
+}
+
+@media (max-width: 767.98px) {
+    .admin-modal {
+        padding-top: max(0.75rem, env(safe-area-inset-top));
+    }
+
+    .admin-modal .modal-dialog {
+        margin: 0.75rem;
+        max-width: none;
+    }
+}
+</style>
diff --git a/frontend/src/components/AdminUserModal.vue b/frontend/src/components/AdminUserModal.vue
new file mode 100644
index 0000000..2da7d8c
--- /dev/null
+++ b/frontend/src/components/AdminUserModal.vue
@@ -0,0 +1,111 @@
+<template>
+    <teleport to="body">
+        <div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
+            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Edit User</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"></button>
+                    </div>
+                    <form @submit.prevent="handleSubmit">
+                        <div class="modal-body">
+                            <div class="mb-3">
+                                <label class="form-label">Username</label>
+                                <input class="form-control" :value="user?.username || ''" type="text" disabled />
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label">Email</label>
+                                <input class="form-control" :value="user?.email || ''" type="text" disabled />
+                            </div>
+
+                            <div class="mb-3">
+                                <label class="form-label">Status</label>
+                                <input class="form-control" :value="user?.is_active ? 'Active' : 'Inactive'" type="text" disabled />
+                            </div>
+
+                            <div>
+                                <label class="form-label">Groups</label>
+                                <select v-model="groupIds" class="form-select" multiple>
+                                    <option v-for="group in groups" :key="group.id" :value="group.id">
+                                        {{ group.name }}
+                                    </option>
+                                </select>
+                                <div class="small text-muted mt-1">Ctrl/Cmd+Click for multiple groups</div>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-outline-secondary" @click="emit('close')">Cancel</button>
+                            <button type="submit" class="btn btn-primary" :disabled="submitting">
+                                {{ submitting ? "Saving..." : "Save Changes" }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="modal-backdrop fade show admin-modal-backdrop"></div>
+    </teleport>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+    user: {
+        type: Object,
+        default: null,
+    },
+    groups: {
+        type: Array,
+        default: () => [],
+    },
+    submitting: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["close", "submit"]);
+
+const groupIds = ref([]);
+
+watch(
+    () => props.user,
+    (user) => {
+        groupIds.value = [...(user?.group_ids || [])];
+    },
+    { immediate: true },
+);
+
+const handleSubmit = () => {
+    emit("submit", { group_ids: groupIds.value });
+};
+</script>
+
+<style scoped>
+.admin-modal {
+    z-index: 2000;
+    overflow-y: auto;
+    padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+
+.admin-modal-backdrop {
+    z-index: 1990;
+}
+
+.admin-modal .modal-dialog {
+    margin: 1rem auto;
+}
+
+@media (max-width: 767.98px) {
+    .admin-modal {
+        padding-top: max(0.75rem, env(safe-area-inset-top));
+    }
+
+    .admin-modal .modal-dialog {
+        margin: 0.75rem;
+        max-width: none;
+    }
+}
+</style>
diff --git a/frontend/src/pages/Admin.vue b/frontend/src/pages/Admin.vue
index 9200c81..a53f5ab 100644
--- a/frontend/src/pages/Admin.vue
+++ b/frontend/src/pages/Admin.vue
@@ -38,48 +38,39 @@
 
                 <div v-if="loadingUsers" class="text-muted small">Loading users...</div>
                 <div v-else-if="users.length === 0" class="border rounded p-3 text-muted">No users found.</div>
-                <div v-else class="table-responsive">
-                    <table class="table table-sm table-hover align-middle mb-0">
-                        <thead class="table-light">
-                            <tr>
-                                <th>Username</th>
-                                <th>Email</th>
-                                <th>Groups</th>
-                                <th>Status</th>
-                                <th>Joined</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="u in users" :key="u.id">
-                                <td>{{ u.username }}</td>
-                                <td class="text-muted small">{{ u.email }}</td>
-                                <td style="min-width: 260px">
-                                    <select
-                                        class="form-select form-select-sm"
-                                        multiple
-                                        :value="u.group_ids || []"
-                                        @change="
-                                            updateUserGroups(
-                                                u.id,
-                                                Array.from($event.target.selectedOptions).map((option) => option.value),
-                                            )
-                                        "
-                                    >
-                                        <option v-for="group in groups" :key="group.id" :value="group.id">
-                                            {{ group.name }}
-                                        </option>
-                                    </select>
-                                    <div class="small text-muted mt-1">Ctrl/Cmd+Click for multiple groups</div>
-                                </td>
-                                <td>
-                                    <span class="badge" :class="u.is_active ? 'text-bg-success' : 'text-bg-secondary'">
-                                        {{ u.is_active ? "Active" : "Inactive" }}
-                                    </span>
-                                </td>
-                                <td class="text-muted small">{{ formatDate(u.created_at) }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-else class="list-group users-list">
+                    <div v-for="u in users" :key="u.id" class="list-group-item user-row">
+                        <div class="user-row-main">
+                            <div class="user-name-line">
+                                <span class="fw-semibold user-name">{{ u.username }}</span>
+                                <span class="badge" :class="u.is_active ? 'text-bg-success' : 'text-bg-secondary'">
+                                    {{ u.is_active ? "Active" : "Inactive" }}
+                                </span>
+                            </div>
+
+                            <div class="user-meta-grid">
+                                <div class="user-meta-item">
+                                    <div class="user-meta-label">Email</div>
+                                    <div class="user-meta-value">{{ u.email }}</div>
+                                </div>
+                                <div class="user-meta-item">
+                                    <div class="user-meta-label">Joined</div>
+                                    <div class="user-meta-value">{{ formatDate(u.created_at) }}</div>
+                                </div>
+                                <div class="user-meta-item user-meta-item-groups">
+                                    <div class="user-meta-label">Groups</div>
+                                    <div class="user-meta-value">{{ getUserGroupSummary(u) }}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="user-row-actions">
+                            <div class="d-flex gap-2 user-actions-stack">
+                                <button class="btn btn-sm btn-outline-primary" @click="openEditUserModal(u)">Edit</button>
+                                <button class="btn btn-sm btn-outline-danger" @click="deleteUser(u)">Delete</button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
@@ -106,7 +97,10 @@
                             <div class="small text-muted">{{ group.description || "No description" }}</div>
                             <div class="small text-muted">{{ (group.permissions || []).length }} permission{{ (group.permissions || []).length === 1 ? "" : "s" }}</div>
                         </div>
-                        <button class="btn btn-sm btn-outline-primary" @click="openEditGroupModal(group)">Edit</button>
+                        <div class="d-flex gap-2">
+                            <button class="btn btn-sm btn-outline-primary" @click="openEditGroupModal(group)">Edit</button>
+                            <button class="btn btn-sm btn-outline-danger" :disabled="group.is_system" @click="deleteGroup(group)">Delete</button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -154,9 +148,12 @@
                             <div class="small text-muted">{{ provider.type.toUpperCase() }} · {{ provider.scopes.join(", ") }}</div>
                             <div class="small text-muted">Callback: {{ buildCallbackUrl(provider.id) }}</div>
                         </div>
-                        <span class="badge" :class="provider.is_active ? 'text-bg-success' : 'text-bg-secondary'">
-                            {{ provider.is_active ? "Active" : "Disabled" }}
-                        </span>
+                        <div class="d-flex align-items-center gap-2">
+                            <span class="badge" :class="provider.is_active ? 'text-bg-success' : 'text-bg-secondary'">
+                                {{ provider.is_active ? "Active" : "Disabled" }}
+                            </span>
+                            <button class="btn btn-sm btn-outline-danger" @click="deleteProvider(provider)">Delete</button>
+                        </div>
                     </div>
                 </div>
 
@@ -309,49 +306,17 @@
 
     <AdminSpaceModal v-if="showSpaceModal && selectedSpace" :space="selectedSpace" :users="users" @close="showSpaceModal = false" @saved="onSpaceSaved" @deleted="onSpaceDeleted" />
 
-    <teleport to="body">
-        <div v-if="showGroupModal" class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeGroupModal">
-            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">{{ groupModalMode === "create" ? "Create Group" : "Edit Group" }}</h5>
-                        <button type="button" class="btn-close" aria-label="Close" @click="closeGroupModal"></button>
-                    </div>
-                    <form @submit.prevent="submitGroupModal">
-                        <div class="modal-body">
-                            <div class="mb-3">
-                                <label class="form-label">Group name</label>
-                                <input v-model="groupModalForm.name" class="form-control" type="text" required :disabled="isEditingSystemGroup" />
-                            </div>
+    <AdminGroupModal
+        v-if="showGroupModal"
+        :mode="groupModalMode"
+        :group="selectedGroup"
+        :is-system-group="isEditingSystemGroup"
+        :submitting="submittingGroupModal"
+        @close="closeGroupModal"
+        @submit="submitGroupModal"
+    />
 
-                            <div class="mb-3">
-                                <label class="form-label">Description</label>
-                                <input v-model="groupModalForm.description" class="form-control" type="text" :disabled="isEditingSystemGroup" />
-                            </div>
-
-                            <div>
-                                <label class="form-label">Permissions (one per line)</label>
-                                <textarea
-                                    v-model="groupModalForm.permissionsText"
-                                    class="form-control permissions-textarea"
-                                    rows="10"
-                                    placeholder="space.create&#10;space.project_docs.category.create&#10;space.project_docs.*"
-                                    :disabled="isEditingSystemGroup"
-                                ></textarea>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-outline-secondary" @click="closeGroupModal">Cancel</button>
-                            <button v-if="!isEditingSystemGroup" type="submit" class="btn btn-primary" :disabled="submittingGroupModal">
-                                {{ submittingGroupModal ? "Saving..." : groupModalMode === "create" ? "Create Group" : "Save Changes" }}
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-        <div v-if="showGroupModal" class="modal-backdrop fade show"></div>
-    </teleport>
+    <AdminUserModal v-if="showUserModal && selectedUser" :user="selectedUser" :groups="groups" :submitting="submittingUserModal" @close="closeUserModal" @submit="submitUserModal" />
 </template>
 
 <script setup>
@@ -359,6 +324,8 @@ import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import apiClient from "../services/apiClient";
 import AdminSpaceModal from "../components/AdminSpaceModal.vue";
+import AdminGroupModal from "../components/AdminGroupModal.vue";
+import AdminUserModal from "../components/AdminUserModal.vue";
 
 const router = useRouter();
 const activeTab = ref("users");
@@ -367,6 +334,9 @@ const successMessage = ref("");
 
 const users = ref([]);
 const loadingUsers = ref(false);
+const showUserModal = ref(false);
+const submittingUserModal = ref(false);
+const selectedUser = ref(null);
 
 const groups = ref([]);
 const loadingGroups = ref(false);
@@ -374,11 +344,7 @@ const showGroupModal = ref(false);
 const groupModalMode = ref("create");
 const editingGroupId = ref("");
 const submittingGroupModal = ref(false);
-const groupModalForm = ref({
-    name: "",
-    description: "",
-    permissionsText: "",
-});
+const selectedGroup = ref(null);
 
 const spaces = ref([]);
 const loadingSpaces = ref(false);
@@ -439,8 +405,10 @@ const loadUsers = async () => {
     }
 };
 
-const updateUserGroups = async (userId, groupIds) => {
-    clearMessages();
+const updateUserGroups = async (userId, groupIds, options = {}) => {
+    if (!options.silent) {
+        clearMessages();
+    }
     try {
         const response = await apiClient.put(`/api/v1/admin/users/${userId}/groups`, { group_ids: groupIds });
         const updatedUser = response.data;
@@ -448,26 +416,70 @@ const updateUserGroups = async (userId, groupIds) => {
         if (userIndex !== -1) {
             users.value[userIndex] = { ...users.value[userIndex], ...updatedUser };
         }
-        successMessage.value = "User groups updated.";
+        if (!options.silent) {
+            successMessage.value = "User groups updated.";
+        }
+        return updatedUser;
     } catch (e) {
         error.value = e.response?.data || "Failed to update user groups.";
+        throw e;
     }
 };
 
-const resetGroupModalForm = () => {
-    groupModalForm.value = {
-        name: "",
-        description: "",
-        permissionsText: "",
-    };
+const getUserGroupSummary = (user) => {
+    const ids = user?.group_ids || [];
+    if (!ids.length) {
+        return "No groups";
+    }
+    const names = ids.map((groupID) => groups.value.find((group) => group.id === groupID)?.name).filter(Boolean);
+    return names.length ? names.join(", ") : "No groups";
+};
+
+const openEditUserModal = (user) => {
+    selectedUser.value = { ...user };
+    showUserModal.value = true;
+};
+
+const closeUserModal = () => {
+    showUserModal.value = false;
+    submittingUserModal.value = false;
+    selectedUser.value = null;
+};
+
+const submitUserModal = async ({ group_ids }) => {
+    submittingUserModal.value = true;
+    clearMessages();
+    try {
+        await updateUserGroups(selectedUser.value.id, group_ids, { silent: true });
+        successMessage.value = "User updated.";
+        closeUserModal();
+    } catch {
+        // error message handled in updateUserGroups
+    } finally {
+        submittingUserModal.value = false;
+    }
+};
+
+const deleteUser = async (user) => {
+    if (!confirm(`Delete user "${user.username}"? This action cannot be undone.`)) {
+        return;
+    }
+
+    clearMessages();
+    try {
+        await apiClient.delete(`/api/v1/admin/users/${user.id}`);
+        users.value = users.value.filter((item) => item.id !== user.id);
+        successMessage.value = `User "${user.username}" deleted.`;
+    } catch (e) {
+        error.value = e.response?.data || "Failed to delete user.";
+    }
 };
 
 const isEditingSystemGroup = computed(() => {
     if (groupModalMode.value !== "edit") {
         return false;
     }
-    const group = groups.value.find((item) => item.id === editingGroupId.value);
-    return !!group?.is_system;
+    return !!selectedGroup.value?.is_system;
 });
 
 const splitPermissionsByNewline = (raw) =>
@@ -479,24 +491,21 @@ const splitPermissionsByNewline = (raw) =>
 const openCreateGroupModal = () => {
     groupModalMode.value = "create";
     editingGroupId.value = "";
-    resetGroupModalForm();
+    selectedGroup.value = null;
     showGroupModal.value = true;
 };
 
 const openEditGroupModal = (group) => {
     groupModalMode.value = "edit";
     editingGroupId.value = group.id;
-    groupModalForm.value = {
-        name: group.name || "",
-        description: group.description || "",
-        permissionsText: (group.permissions || []).join("\n"),
-    };
+    selectedGroup.value = { ...group };
     showGroupModal.value = true;
 };
 
 const closeGroupModal = () => {
     showGroupModal.value = false;
     submittingGroupModal.value = false;
+    selectedGroup.value = null;
 };
 
 const loadGroups = async () => {
@@ -512,14 +521,14 @@ const loadGroups = async () => {
     }
 };
 
-const submitGroupModal = async () => {
+const submitGroupModal = async (formData) => {
     submittingGroupModal.value = true;
     clearMessages();
     try {
         const payload = {
-            name: groupModalForm.value.name,
-            description: groupModalForm.value.description,
-            permissions: splitPermissionsByNewline(groupModalForm.value.permissionsText),
+            name: formData.name,
+            description: formData.description,
+            permissions: splitPermissionsByNewline(formData.permissionsText),
         };
 
         if (groupModalMode.value === "create") {
@@ -531,7 +540,6 @@ const submitGroupModal = async () => {
         }
 
         closeGroupModal();
-        resetGroupModalForm();
         await Promise.all([loadGroups(), loadUsers()]);
     } catch (e) {
         error.value = e.response?.data || `Failed to ${groupModalMode.value === "create" ? "create" : "update"} group.`;
@@ -540,6 +548,24 @@ const submitGroupModal = async () => {
     }
 };
 
+const deleteGroup = async (group) => {
+    if (group.is_system) {
+        return;
+    }
+    if (!confirm(`Delete group "${group.name}"? This action cannot be undone.`)) {
+        return;
+    }
+
+    clearMessages();
+    try {
+        await apiClient.delete(`/api/v1/admin/groups/${group.id}`);
+        successMessage.value = `Group "${group.name}" deleted.`;
+        await Promise.all([loadGroups(), loadUsers()]);
+    } catch (e) {
+        error.value = e.response?.data || "Failed to delete group.";
+    }
+};
+
 const loadSpaces = async () => {
     loadingSpaces.value = true;
     clearMessages();
@@ -625,6 +651,21 @@ const createProvider = async () => {
     }
 };
 
+const deleteProvider = async (provider) => {
+    if (!confirm(`Delete identity provider "${provider.name}"? This action cannot be undone.`)) {
+        return;
+    }
+
+    clearMessages();
+    try {
+        await apiClient.delete(`/api/v1/admin/auth/providers/${provider.id}`);
+        providers.value = providers.value.filter((item) => item.id !== provider.id);
+        successMessage.value = `Provider "${provider.name}" deleted.`;
+    } catch (e) {
+        error.value = e.response?.data || "Failed to delete provider.";
+    }
+};
+
 const loadFeatureFlags = async () => {
     loadingFeatureFlags.value = true;
     clearMessages();
@@ -699,7 +740,96 @@ onMounted(async () => {
     border-radius: 12px;
 }
 
-.permissions-textarea {
-    font-family: "Courier New", monospace;
+.users-list .list-group-item {
+    padding: 1rem;
+}
+
+.user-row {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.user-row-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.user-row-actions {
+    flex-shrink: 0;
+}
+
+.user-actions-stack {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.user-name-line {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+}
+
+.user-name {
+    font-size: 1.1rem;
+}
+
+.user-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem 1.25rem;
+}
+
+.user-meta-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #6c757d;
+    margin-bottom: 0.1rem;
+}
+
+.user-meta-value {
+    color: #495057;
+    overflow-wrap: anywhere;
+}
+
+.user-meta-item-groups {
+    grid-column: span 1;
+}
+
+@media (max-width: 991.98px) {
+    .user-meta-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .user-meta-item-groups {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .user-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .user-row-actions {
+        width: 100%;
+    }
+
+    .user-row-actions .btn {
+        width: 100%;
+    }
+
+    .user-actions-stack {
+        flex-direction: column;
+    }
+
+    .user-meta-grid {
+        grid-template-columns: 1fr;
+        gap: 0.65rem;
+    }
 }
 </style>
diff --git a/frontend/src/utils/markdown.js b/frontend/src/utils/markdown.js
index c13ef2f..5081184 100644
--- a/frontend/src/utils/markdown.js
+++ b/frontend/src/utils/markdown.js
@@ -15,15 +15,12 @@
  */
 export function preprocessMarkdown(content) {
     if (!content) return content;
-    return content.replace(
-        /!\[([^\]]*)\]\(([^\s)"]+)(?:\s+"([^"]*)")?\s+=(\d*%?)[xX](\d*%?)\)/gi,
-        (_, alt, url, title, w, h) => {
-            const safeAlt = alt.replace(/"/g, "&quot;");
-            let attrs = `src="${url}" alt="${safeAlt}"`;
-            if (title) attrs += ` title="${title.replace(/"/g, "&quot;")}"`;
-            if (w) attrs += ` width="${w}"`;
-            if (h) attrs += ` height="${h}"`;
-            return `<img ${attrs}>`;
-        },
-    );
+    return content.replace(/!\[([^\]]*)\]\(([^\s)"]+)(?:\s+"([^"]*)")?\s+=(\d*%?)[xX](\d*%?)\)/gi, (_, alt, url, title, w, h) => {
+        const safeAlt = alt.replace(/"/g, "&quot;");
+        let attrs = `src="${url}" alt="${safeAlt}"`;
+        if (title) attrs += ` title="${title.replace(/"/g, "&quot;")}"`;
+        if (w) attrs += ` width="${w}"`;
+        if (h) attrs += ` height="${h}"`;
+        return `<img ${attrs}>`;
+    });
 }