Redesign user management interface with improved side pane and enhanced permissions

[tjementum]

Summary & Motivation

This introduces a comprehensive redesign of the user management interface, focusing on improved user experience and proper permission handling. The main feature is a new user profile side pane that provides quick access to user details while maintaining context within the user list.

• Implement a new user profile side pane that slides in from the right and allows viewing user details without leaving the user list page.
• Add deep linking support for individual users with a new API endpoint to fetch user details by ID.
• Enhance permission controls by restricting tenant and user management actions to Owner role only.
• Make the side menu resizable with user preferences saved in local storage.
• Display tenant name in the side menu instead of the logo.
• Improve responsive behavior with proper mobile handling and dynamic filter button collapse based on available space.
• Add comprehensive accessibility improvements including aria-labels, keyboard navigation, and proper semantic HTML.
• Update the change user role flow to use a standard dialog pattern with OK/Cancel buttons.
• Fix multiple UI issues including table scrolling, z-index layering, and hover states.
• Add tooltips to icon-only buttons and improve visual feedback for disabled actions.
• Implement proper data freshness warnings when user data differs between views.

Downstream projects

Add TenantName to the SharedSideMenu

+import { useUserInfo } from "@repo/infrastructure/auth/hooks";

export function SharedSideMenu({ children, ariaLabel }: Readonly<SharedSideMenuProps>) {
+  const userInfo = useUserInfo();

  return (
-    <SideMenu ariaLabel={ariaLabel}>
+    <SideMenu ariaLabel={ariaLabel} tenantName={userInfo?.tenantName}>

This change introduces more changes to the UI components. Please review your application to ensure everything looks as it should.

This change introduces more changes to the AppLayout and is part of a bigger redesign. Consider looking at these changes holistically.

Checklist

• I have added tests, or done manual regression tests
• I have updated the documentation, if necessary

[sonarqubecloud]

Quality Gate passed

Issues
17 New issues
0 Accepted issues

Measures
0 Security Hotspots
6.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud