Initial concept at a user table listing using Tailwind JIT & Headless UI

package.json

@@ -42,6 +42,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.16",
+        "@headlessui/react": "^1.5.0",
         "@heroicons/react": "^1.0.5",
         "@hot-loader/react-dom": "^16.14.0",
         "axios": "^0.21.4",

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

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import http from '@/api/http';
+import { User } from '@/api/admin/user';
+import { AdminTransformers } from '@/api/admin/transformers';
+import { Menu } from '@headlessui/react';
+import { ChevronDownIcon, LockClosedIcon } from '@heroicons/react/solid';
+
+const UsersContainerV2 = () => {
+    const [ users, setUsers ] = useState<User[]>([]);
+    useEffect(() => {
+        document.title = 'Admin | Users';
+    }, []);
+
+    useEffect(() => {
+        http.get('/api/application/users')
+            .then(({ data }) => {
+                setUsers(data.data.map(AdminTransformers.toUser));
+            })
+            .catch(console.error);
+    }, []);
+
+    return (
+        <div className={'overflow-hidden rounded bg-neutral-700'}>
+            <table className={'min-w-full'}>
+                <thead className={'bg-neutral-900'}>
+                    <tr>
+                        <th scope={'col'} className={'w-8'}/>
+                        <th scope={'col'} className={'text-left px-6 py-2 w-full'}>Email</th>
+                        <th scope={'col'}/>
+                    </tr>
+                </thead>
+                <tbody>
+                    {users.map(user => (
+                        <tr key={user.uuid}>
+                            <td className={'whitespace-nowrap'}>
+                                <div className={'flex justify-end items-center w-8'}>
+                                    <input type={'checkbox'}/>
+                                </div>
+                            </td>
+                            <td className={'pl-6 py-4 whitespace-nowrap'}>
+                                <div className={'flex items-center'}>
+                                    <div className={'w-10 h-10'}>
+                                        <img
+                                            src={user.avatarUrl}
+                                            className={'w-10 h-10 rounded-full'}
+                                            alt={'User avatar'}
+                                        />
+                                    </div>
+                                    <div className={'ml-4'}>
+                                        <p className={'font-medium'}>
+                                            {user.email}
+                                        </p>
+                                        <p className={'text-sm text-neutral-400'}>
+                                            {user.uuid}
+                                        </p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td className={'px-6 py-4 whitespace-nowrap'}>
+                                <Menu as={'div'} className={'relative inline-block text-left'}>
+                                    <Menu.Button
+                                        className={'inline-flex justify-center w-full px-4 py-2 font-medium text-white rounded-md'}
+                                    >
+                                        Options
+                                        <ChevronDownIcon
+                                            aria-hidden={'true'}
+                                            className={'w-5 h-5 -mr-1 ml-2 text-neutral-100'}
+                                        />
+                                    </Menu.Button>
+                                    <Menu.Items className={'absolute right-0 mt-2 origin-top-right bg-neutral-900 z-10 w-56'}>
+                                        <div className={'px-1 py-1'}>
+                                            <Menu.Item>
+                                                {() => (
+                                                    <a href={'#'} className={'group flex rounded items-center w-full px-2 py-2 hover:bg-neutral-800'}>
+                                                        <LockClosedIcon className={'w-5 h-5 mr-2'} />
+                                                        <span>Reset Password</span>
+                                                    </a>
+                                                )}
+                                            </Menu.Item>
+                                            <Menu.Item>
+                                                {() => (
+                                                    <a href={'#'} className={'group flex rounded items-center w-full px-2 py-2'}>Delete</a>
+                                                )}
+                                            </Menu.Item>
+                                            <Menu.Item
+                                                disabled
+                                            >
+                                                <span className={'group flex rounded items-center w-full px-2 py-2 opacity-75'}>
+                                                Resend Invite
+                                                </span>
+                                            </Menu.Item>
+                                        </div>
+                                    </Menu.Items>
+                                </Menu>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default UsersContainerV2;

resources/scripts/routers/AdminRouter.tsx

@@ -15,7 +15,6 @@ import LocationEditContainer from '@/components/admin/locations/LocationEditCont
 import ServersContainer from '@/components/admin/servers/ServersContainer';
 import NewServerContainer from '@/components/admin/servers/NewServerContainer';
 import ServerRouter from '@/components/admin/servers/ServerRouter';
-import UsersContainer from '@/components/admin/users/UsersContainer';
 import NewUserContainer from '@/components/admin/users/NewUserContainer';
 import UserRouter from '@/components/admin/users/UserRouter';
 import RolesContainer from '@/components/admin/roles/RolesContainer';
@@ -46,6 +45,7 @@ import {
 import CollapsedIcon from '@/assets/images/pterodactyl.svg';
 import Sidebar from '@/components/admin/Sidebar';
 import useUserPersistedState from '@/plugins/useUserPersistedState';
+import UsersContainerV2 from '@/components/admin/users/UsersContainerV2';
 
 const AdminRouter = ({ location, match }: RouteComponentProps) => {
     const email = useStoreState((state: State<ApplicationStore>) => state.user.data!.email);
@@ -132,7 +132,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
                         <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
                         <Route path={`${match.path}/servers/:id`} component={ServerRouter}/>
-                        <Route path={`${match.path}/users`} component={UsersContainer} exact/>
+                        <Route path={`${match.path}/users`} component={UsersContainerV2} exact/>
                         <Route path={`${match.path}/users/new`} component={NewUserContainer} exact/>
                         <Route path={`${match.path}/users/:id`} component={UserRouter}/>
                         <Route path={`${match.path}/roles`} component={RolesContainer} exact/>

yarn.lock

@@ -2474,6 +2474,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@headlessui/react@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@headlessui/react@npm:1.5.0"
+  peerDependencies:
+    react: ^16 || ^17 || ^18
+    react-dom: ^16 || ^17 || ^18
+  checksum: e3373dfb73936950d659a87718fb9fdedc599b344b30cb0d8b1ef0a2ec13d6f405c653fa51284236788658840ece82c6a8538a5a5931e595274e9590b2020079
+  languageName: node
+  linkType: hard
+
 "@heroicons/react@npm:^1.0.5":
   version: 1.0.5
   resolution: "@heroicons/react@npm:1.0.5"
@@ -10933,6 +10943,7 @@ fsevents@^1.2.7:
     "@fortawesome/free-regular-svg-icons": ^5.15.4
     "@fortawesome/free-solid-svg-icons": ^5.15.4
     "@fortawesome/react-fontawesome": ^0.1.16
+    "@headlessui/react": ^1.5.0
     "@heroicons/react": ^1.0.5
     "@hot-loader/react-dom": ^16.14.0
     "@tailwindcss/forms": ^0.4.0