Add User Management page with dummy data and Admin Center skeleton

[Maximus404]

Summary & Motivation

Create a new User Management page with dummy data. This includes displaying a table with avatars and user profile data, along with resizing, sorting, and pagination functionality. The page also features unimplemented buttons for filtering, inviting users, and navigation to tabs like invited users and user groups.

Additionally, this update introduces the skeleton for the Admin Center, including main navigation and breadcrumbs.

Checklist

• [x] I have added a Label to the pull-request
• [x] I have added tests, and done manual regression tests
• [x] I have updated the documentation, if necessary

[tjementum]

@Maximus404 Awesome progress. As you might know, I’m not good at doing frontend. However, I did have some problems with, e.g., missing ‘avatar.png,’ and when I added one, the table became way too big. So, I’ve done a bunch of small adjustments and “improvements” to align it with the Figma design. Also, I’ve tried to play with the table and column resizing. I actually think it’s pretty decent, although still not perfect.

I pushed my changes to a branch in the main repository with the same name. Feel free to incorporate my changes and force push them to your fork. I’m sure that the Tailwind needs some cleaning up/reordering as I don’t know the conventions.

But hey… this is one of the things I’ve been looking forward to for a very long time, and it is just great to see that we can make something that is very close to the Figma design (although I did not manage to remove the outer border from the React Aria Table, which would be great if we could). Also, the accessibility of it is just amazing.

One comment about naming of things, which I did not change. But in the API I use the following names. It would be great if we use the exact same names in the frontend code, which will make it easier to understand and change.

When querying:

• Search - The search string
• UserRole - The user role. Posible values TenantUser, TenantAdmin, TenantOwner
• OrderBy - The field you want to order. Possible values: CreatedAt, ModifiedAt, Name, Email, UserRole
• SortOrder - Either Ascending or Decending
• PageSize - The number of users/rows/items on a page
• PageOffset - When on the first page this is 0 and when on the second page this is 1, etc.

When you get the result it will contain this:

• TotalCount - The total numbers
• TotalPages - The total number of pages
• CurrentPageOffset - The current page offset
• Users - A list of uses with these values
  • Id,
  • CreatedAt
  • ModifiedAt
  • Email
  • UserRole
  • FirstName
  • LastName
  • EmailConfirmed
  • AvatarUrl

I guess I need to add Title, and also we will have to find a good way to change e.g. TenantOwner to just Owner.