Admin UX Improvement Feasibility

Date: 2026-05-19 Status: Proposed - not yet implemented Scope: Enterprise / Workspace / User administration in Application-Frontend

Problem Summary

The current admin experience is fragmented across multiple disconnected pages and uses terminology that doesn't map to how users think about the system. The issues cluster into three areas: navigation, terminology, and individual form bugs.

---

Current State

Navigation fragmentation

The user menu (UserProfileDropdown.vue) can show up to seven items depending on permission level:

• Profile
• Enterprise Users (if listEnterpriseUsers permission)
• Workspace Users (if listWorkspaceUsers permission)
• Non-Global Users (if isInGlobalMode && listGlobalUsers)
• Global Accounts (if isInGlobalMode && listGlobalUsers)
• Enterprises (if canListEnterprises)
• Workspaces (resolves to either workspaces or enterprise_workspaces)

There is no visual grouping between these items. The Enterprise/Workspace/User hierarchy is implicit - you have to navigate between separate list pages to understand relationships. The enterprises page shows workspace and user counts as metadata but clicking either number navigates to a completely separate list with no breadcrumb back.

Terminology confusion

"Non-Global Users" resolves to the accounts route. "Global Accounts" resolves to global_users. Neither label tells a user what they are looking at. The distinction is implementation-level (whether a user has a global role vs. an enterprise/workspace role), not meaningful to most admins.

The router and store use a clearer internal vocabulary (isGlobalUser, isEnterpriseUser, isWorkspaceUser) that is never surfaced in the UI.

Enterprise creation flow

The create enterprise flow (CreateEnterprise.vue + EditEnterpriseUser.vue) uses a multi-step wizard controlled by enterpriseCreationFlow state in src/store/modules/enterprises.ts:

enterpriseCreationFlow: {
  isActive: boolean
  createEnterpriseUser: boolean
  isEnterpriseUserCreated: boolean
  ...
}

The flow works like this: create enterprise, optionally tick "Create enterprise user", submit, get redirected to create_enterprise_user. Two bugs have been fixed:

• The X/close button in CreateEditFormShell was disabled mid-flow, trapping users
• Closing navigated back to the create form instead of the enterprise list

One issue remains: fetchRoles({ types: ['enterprise'] }) in EditEnterpriseUser.vue returns the data from GET /roles?types[]=enterprise. If the backend returns an empty array, the role dropdown renders with "No data available" but the form cannot be submitted (roles are required by Vuelidate). There is no empty-state message explaining what happened or what to do. The same issue applies to fetchRoles({ types: ['global'] }) in EditGlobalUser.vue.

Confusing action menu in enterprise accounts

The enterprise accounts list shows an action menu per user with two edit options: "Edit user's account" and "Edit enterprise user". "Edit user's account" navigates to the global user profile (name, email, avatar). "Edit enterprise user" navigates to the enterprise-specific role assignments. The labels do not communicate this distinction. From an admin's perspective, both look like "edit this user" and there is no way to tell which does what without clicking.

The same pattern likely exists in workspace accounts. A clearer approach would be a single "Edit" action that opens a unified view, or at minimum rename the labels to something like "Edit profile" and "Edit enterprise roles".

Limited edit experience

The Edit Enterprise form (CreateEnterprise.vue in edit mode) only shows name and logo. There is no way to see related workspaces or users, add an enterprise user, or navigate to the enterprise's workspace list from within the edit form. The create flow has a "Create enterprise user" shortcut; the edit form has nothing equivalent.

Avatar upload in EditGlobalUser

EditGlobalUser.vue passes :show-uploader="enableUserDetailsEdit" to ImageInput. If the API link updateUser is absent from the response (e.g. the current user lacks permission or the backend omits the link), canEditUserDetails stays false, enableUserDetailsEdit is false, and the uploader is hidden entirely. The field renders as a static image with no indication that upload is unavailable or why.

---

Proposed Improvements

Phase 1 - Low-hanging fruit (independent, low risk)

These are isolated fixes that require no design work or cross-team alignment.

1. Fix the roles empty state

In both EditEnterpriseUser.vue and EditGlobalUser.vue, after fetchRoles resolves, check if rolesForSelection is empty and show an inline alert if so. The form should not be submittable and the user should know why.

// After fetchRoles resolves
if (this.rolesForSelection.length === 0) {
  this.rolesError = true
}

Add a v-if="rolesError" alert above the role section. This is a frontend-only fix and doesn't depend on whether the backend issue is real or environment-specific.

2. Fix the workspace name label in enterprise creation (done)

The workspace field in CreateEnterprise.vue used the i18n key workspaces.add_first_workspace ("Add your first workspace") as its label. Changed to "Workspace name" to match the placeholder.

3. Make avatar upload state explicit

When show-uploader is false in EditGlobalUser.vue, show a read-only placeholder or a disabled-state message instead of silently hiding the control. This is a prop addition to ImageInput or a wrapper condition in the form.

4. Consistent close behavior across wizard forms

Verify that all CreateEditFormShell close/cancel actions across enterprise, workspace, and user forms navigate to the appropriate list, not to the previous browser history entry. The beforeRouteLeave guard in EditEnterpriseUser.vue already does this correctly for the creation flow - audit the other forms for the same pattern.

Phase 2 - Navigation consolidation (requires design)

The goal is to reduce the user menu to a single "Administration" entry that leads to a unified admin area, rather than scattering links across the dropdown.

Proposed menu structure:

Profile
Administration    (single entry, visible if any admin permission is present)
Trash
Sign out

The Administration entry leads to a page or drawer that shows the hierarchy:

Enterprises
  My Enterprise
    Workspaces (3)
    Users (12)
Workspaces
  My Workspace
    Users (5)
Global Users

Clicking a node navigates to its list. The current separate list pages (EnterprisesPage, workspace list, accounts list) remain as-is; only the entry point consolidates.

Terminology changes:

Current label	Proposed label
Non-Global Users	Users
Global Accounts	Global Users
Enterprise Users	Enterprise Users (keep)
Workspace Users	Workspace Users (keep)

The accounts route (currently "Non-Global Users") is the catch-all for non-global users. Renaming it to "Users" in the menu is the minimum viable fix.

Technical notes:

• UserProfileDropdown.vue controls all visibility logic via permission getters. The consolidation is largely a template restructuring - the underlying permission checks do not change.
• The resolvedWorkspacesLabel computed already does role-aware label resolution; the same pattern can apply to the consolidated menu entry.
• No Vuex store changes are needed for Phase 2.

Phase 3 - Unified admin panel (larger project)

A single /admin page with a persistent sidebar tree showing the full Enterprise/Workspace/User hierarchy. Clicking an enterprise shows its workspaces and users in the main content area. Inline actions (add user, add workspace) work without leaving the context.

This would replace the current separate list pages for admin use cases while keeping the existing routes for direct linking and non-admin entry points.

What this requires:

• New AdminPanel.vue page with sidebar + content area layout
• A new Vuex module or extension of existing enterprises / workspaces / accounts modules to support the tree-fetch pattern
• API support for fetching workspaces and users scoped to an enterprise in a single call, or acceptable waterfall fetches
• Design mockups and UX review before implementation
• Router changes to add /admin and update the menu entry point

Risk: Medium to high. This touches the primary admin navigation path and needs thorough QA across all user roles (global, enterprise, workspace).

---

Technical Constraints

• Enterprise, workspace, and user data live in separate Vuex modules (enterprises.ts, workspaces.ts, accounts.ts, roles.ts). Cross-entity queries require sequential fetches or new backend endpoints.
• CreateEditFormShell is shared across all wizard forms. Any change to its close behavior must be tested across all consumers.
• The fetchRoles action in roles.ts is a thin Axios wrapper with no caching. If roles are fetched multiple times across a flow, each call hits the API.
• Role API: GET /roles?types[]=enterprise and GET /roles?types[]=global - if these return empty in production for valid users, that is a backend issue that needs investigation independently of the frontend empty-state fix.
• The enterpriseCreationFlow state in enterprises.ts is persisted via vuex-persistedstate. A partially completed flow that is abandoned (browser close, navigation away) will leave isActive: true in localStorage. The resetEnterpriseCreationFlow mutation should be called defensively on the enterprise list page mount.

---

Recommendation

Start with Phase 1. Each fix is self-contained, low risk, and improves the experience immediately without any design dependencies.

Phase 2 (navigation consolidation) should be scoped as a single PR with a focused diff on UserProfileDropdown.vue and the i18n keys. The terminology rename alone is one file change and has high visibility impact.

Phase 3 is a separate project. It should not begin until Phase 1 and 2 are stable and until there is a confirmed design from the product team.

Key Files

File	Role
src/components/layout/UserProfileDropdown.vue	Admin menu - all visibility logic
src/pages/Enterprises/CreateEnterprise.vue	Create and edit enterprise form
src/pages/Enterprises/index.vue	Enterprise list page
src/pages/Accounts/EditEnterpriseUser.vue	Create and edit enterprise user
src/pages/Accounts/EditGlobalUser.vue	Create and edit global user
src/pages/Accounts/EditWorkspaceUser.vue	Create and edit workspace user
src/store/modules/enterprises.ts	Enterprise state + creation flow
src/store/modules/roles.ts	fetchRoles action
src/components/components/CreateEditFormShell.vue	Shared wizard shell