Improvements to UsersContainer.tsx

app/Transformers/Api/Application/UserTransformer.php

@@ -27,24 +27,25 @@ class UserTransformer extends BaseTransformer
     /**
      * Return a transformed User model that can be consumed by external services.
      *
-     * @param \Pterodactyl\Models\User $user
+     * @param \Pterodactyl\Models\User $model
      * @return array
      */
-    public function transform(User $user): array
+    public function transform(User $model): array
     {
         return [
-            'id' => $user->id,
+            'id' => $model->id,
-            'external_id' => $user->external_id,
+            'external_id' => $model->external_id,
-            'uuid' => $user->uuid,
+            'uuid' => $model->uuid,
-            'username' => $user->username,
+            'username' => $model->username,
-            'email' => $user->email,
+            'email' => $model->email,
-            'first_name' => $user->name_first,
+            'first_name' => $model->name_first,
-            'last_name' => $user->name_last,
+            'last_name' => $model->name_last,
-            'language' => $user->language,
+            'language' => $model->language,
-            'root_admin' => (bool) $user->root_admin,
+            'root_admin' => (bool) $model->root_admin,
-            '2fa' => (bool) $user->use_totp,
+            '2fa' => (bool) $model->use_totp,
-            'created_at' => $this->formatTimestamp($user->created_at),
+            'role_name' => $model->root_admin ? 'Super Administrator' : 'None',
-            'updated_at' => $this->formatTimestamp($user->updated_at),
+            'created_at' => $this->formatTimestamp($model->created_at),
+            'updated_at' => $this->formatTimestamp($model->updated_at),
         ];
     }
 
@@ -52,8 +53,10 @@ class UserTransformer extends BaseTransformer
      * Return the servers associated with this user.
      *
      * @param \Pterodactyl\Models\User $user
+     *
      * @return \League\Fractal\Resource\Collection|\League\Fractal\Resource\NullResource
      *
+     * @throws \Illuminate\Contracts\Container\BindingResolutionException
      * @throws \Pterodactyl\Exceptions\Transformer\InvalidTransformerLevelException
      */
     public function includeServers(User $user)

resources/scripts/api/admin/users/getUsers.ts

@@ -14,6 +14,7 @@ export interface User {
     language: string;
     rootAdmin: boolean;
     tfa: boolean;
+    roleName: string;
     createdAt: Date;
     updatedAt: Date;
 }

resources/scripts/api/transformers.ts

@@ -130,6 +130,7 @@ export const rawDataToUser = ({ attributes }: FractalResponseData): User => ({
     language: attributes.language,
     rootAdmin: attributes.root_admin,
     tfa: attributes['2fa'],
+    roleName: attributes.role_name,
     createdAt: new Date(attributes.created_at),
     updatedAt: new Date(attributes.updated_at),
 });

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -1,7 +1,8 @@
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 import React, { useContext, useEffect, useState } from 'react';
 import getUsers, { Context as UsersContext } from '@/api/admin/users/getUsers';
-import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader, TableRow } from '@/components/admin/AdminTable';
+import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -11,9 +12,9 @@ import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 
 const RowCheckbox = ({ id }: { id: number}) => {
-    const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
+    const isChecked = AdminContext.useStoreState(state => state.users.selectedUsers.indexOf(id) >= 0);
-    const appendSelectedUser = AdminContext.useStoreActions(actions => actions.nests.appendSelectedNest);
+    const appendSelectedUser = AdminContext.useStoreActions(actions => actions.users.appendSelectedUser);
-    const removeSelectedUser = AdminContext.useStoreActions(actions => actions.nests.removeSelectedNest);
+    const removeSelectedUser = AdminContext.useStoreActions(actions => actions.users.removeSelectedUser);
 
     return (
         <AdminCheckbox
@@ -48,8 +49,8 @@ const UsersContainer = () => {
 
     const length = users?.items?.length || 0;
 
-    const setSelectedUsers = AdminContext.useStoreActions(actions => actions.nests.setSelectedNests);
+    const setSelectedUsers = AdminContext.useStoreActions(actions => actions.users.setSelectedUsers);
-    const selectedUserLength = AdminContext.useStoreState(state => state.nests.selectedNests.length);
+    const selectedUserLength = AdminContext.useStoreState(state => state.users.selectedUsers.length);
 
     const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSelectedUsers(e.currentTarget.checked ? (users?.items?.map(user => user.id) || []) : []);
@@ -90,28 +91,56 @@ const UsersContainer = () => {
                                     <table css={tw`w-full table-auto`}>
                                         <TableHead>
                                             <TableHeader name={'ID'}/>
-                                            <TableHeader name={'Email'}/>
+                                            <TableHeader name={'Name'}/>
                                             <TableHeader name={'Username'}/>
-                                            <TableHeader name={'Client Name'}/>
+                                            <TableHeader name={'Status'}/>
+                                            <TableHeader name={'Role'}/>
                                         </TableHead>
 
                                         <TableBody>
                                             {
                                                 users.items.map(user => (
-                                                    <TableRow key={user.id}>
+                                                    <tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
                                                         <td css={tw`pl-6`}>
                                                             <RowCheckbox id={user.id}/>
                                                         </td>
 
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.id}</td>
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
-                                                            <NavLink to={`${match.url}/${user.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                            <CopyOnClick text={user.id.toString()}>
-                                                                {user.email}
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
+                                                        <td css={tw`px-6 whitespace-nowrap`}>
+                                                            <NavLink to={`${match.url}/${user.id}`}>
+                                                                <div css={tw`flex items-center`}>
+                                                                    <div css={tw`flex-shrink-0 h-10 w-10`}>
+                                                                        <img css={tw`h-10 w-10 rounded-full`} alt="" src="https://www.gravatar.com/avatar/92623b66155f7e475250b549226a5023"/>
+                                                                    </div>
+
+                                                                    <div css={tw`ml-4`}>
+                                                                        <div css={tw`text-sm text-neutral-200`}>
+                                                                            {user.firstName} {user.lastName}
+                                                                        </div>
+
+                                                                        <div css={tw`text-sm text-neutral-400`}>
+                                                                            {user.email}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
                                                             </NavLink>
                                                         </td>
+
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td>
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.lastName}, {user.firstName}</td>
+
-                                                    </TableRow>
+                                                        <td css={tw`px-6 whitespace-nowrap`}>
+                                                            <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
+                                                                Active
+                                                            </span>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName}</td>
+                                                    </tr>
                                                 ))
                                             }
                                         </TableBody>

resources/scripts/state/admin/index.ts

@@ -3,15 +3,18 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 
 import nests, { AdminNestStore } from '@/state/admin/nests';
 import roles, { AdminRoleStore } from '@/state/admin/roles';
+import users, { AdminUserStore } from '@/state/admin/users';
 
 interface AdminStore {
-    nests: AdminNestStore
+    nests: AdminNestStore;
     roles: AdminRoleStore;
+    users: AdminUserStore;
 }
 
 export const AdminContext = createContextStore<AdminStore>({
     nests,
     roles,
+    users,
 }, {
     compose: composeWithDevTools({
         name: 'AdminStore',

resources/scripts/state/admin/users.ts

@@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminUserStore {
+    selectedUsers: number[];
+
+    setSelectedUsers: Action<AdminUserStore, number[]>;
+    appendSelectedUser: Action<AdminUserStore, number>;
+    removeSelectedUser: Action<AdminUserStore, number>;
+}
+
+const roles: AdminUserStore = {
+    selectedUsers: [],
+
+    setSelectedUsers: action((state, payload) => {
+        state.selectedUsers = payload;
+    }),
+
+    appendSelectedUser: action((state, payload) => {
+        state.selectedUsers = state.selectedUsers.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedUser: action((state, payload) => {
+        state.selectedUsers = state.selectedUsers.filter(id => id !== payload);
+    }),
+};
+
+export default roles;