(ui): add page to view user list

nexgenlabs · Oct 24, 2024 · 8e3510a · 8e3510a
1 parent 34a4a3b
commit 8e3510a
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 191 deletions.
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
diff --git a/app/Http/Controllers/UsersController.php b/app/Http/Controllers/UsersController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Influx\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response;
+use Influx\Models\User;
+use Illuminate\Http\Request;
+
+class UsersController extends Controller
+{
+    /**
+     * Display the table holding all user accounts.
+     */
+    public function index(Request $request): Response
+    {
+        return Inertia::render('Users/Index', [
+            'users' => User::all(),
+        ]);
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
         "vite": "^5.0"
     },
     "dependencies": {
-        "@heroicons/react": "^2.1.5"
+        "@heroicons/react": "^2.1.5",
+        "boring-avatars": "^1.11.2"
     }
 }
diff --git a/resources/js/Components/Table.tsx b/resources/js/Components/Table.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+export default function Table({ children }: { children: ReactNode }) {
+    return (
+        <table className="w-full text-left text-sm text-gray-500 rtl:text-right dark:text-gray-400">
+            {children}
+        </table>
+    );
+}
+
+export function Head({ columns }: { columns: string[] }) {
+    return (
+        <thead className="bg-zinc-900 text-xs uppercase">
+            <tr>
+                {columns.map((col) => (
+                    <th scope="col" className="px-6 py-3" key={col}>
+                        {col}
+                    </th>
+                ))}
+            </tr>
+        </thead>
+    );
+}
+
+export function Body({ children }: { children: ReactNode }) {
+    return <tbody>{children}</tbody>;
+}
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -2,7 +2,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import NavLink from '@/Components/NavLink';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
-import { ComputerDesktopIcon } from '@heroicons/react/24/outline';
+import { ComputerDesktopIcon, UsersIcon } from '@heroicons/react/24/outline';
 import { Head, Link, usePage } from '@inertiajs/react';
 import { PropsWithChildren, ReactNode, useState } from 'react';
 
@@ -39,6 +39,13 @@ export default function Authenticated({
                                     />
                                     Dashboard
                                 </NavLink>
+                                <NavLink
+                                    href={route('users.index')}
+                                    active={route().current('users.*')}
+                                >
+                                    <UsersIcon className={'mr-2 h-5 w-5'} />
+                                    Accounts
+                                </NavLink>
                             </div>
                         </div>
 
@@ -144,6 +151,13 @@ export default function Authenticated({
                             <ComputerDesktopIcon />
                             Dashboard
                         </ResponsiveNavLink>
+                        <ResponsiveNavLink
+                            href={route('users.index')}
+                            active={route().current('users.*')}
+                        >
+                            <UsersIcon />
+                            Accounts
+                        </ResponsiveNavLink>
                     </div>
 
                     <div className="border-t border-gray-200 pb-1 pt-4 dark:border-gray-600">

diff --git a/resources/js/Pages/Auth/Register.tsx b/resources/js/Pages/Auth/Register.tsx
diff --git a/resources/js/Pages/Users/Index.tsx b/resources/js/Pages/Users/Index.tsx
@@ -0,0 +1,58 @@
+import { Body, Head } from '@/Components/Table';
+import Authenticated from '@/Layouts/AuthenticatedLayout';
+import { PageProps, User } from '@/types';
+import Avatar from 'boring-avatars';
+
+export default function Index({ users }: PageProps<{ users: User[] }>) {
+    return (
+        <Authenticated title={'All Users'}>
+            <table className="w-full text-left text-sm text-gray-400">
+                <Head columns={['Name', 'Position', 'Status', 'Action']} />
+                <Body>
+                    {users.map((user) => (
+                        <tr
+                            className="duration-250 border-b border-gray-800 bg-zinc-800 transition dark:hover:bg-zinc-800/80"
+                            key={user.email}
+                        >
+                            <th
+                                scope="row"
+                                className="flex items-center whitespace-nowrap px-6 py-4"
+                            >
+                                <Avatar
+                                    variant={'beam'}
+                                    name={'EmailName'}
+                                    className={'h-10 w-10'}
+                                />
+                                <div className="ps-3">
+                                    <div className="text-base font-semibold">
+                                        {user.name}
+                                    </div>
+                                    <div className="font-normal text-gray-500">
+                                        {user.email}
+                                    </div>
+                                </div>
+                            </th>
+                            <td className="px-6 py-4">
+                                {user.superuser ? 'Superuser' : 'Standard'}
+                            </td>
+                            <td className="px-6 py-4">
+                                <div className="flex items-center">
+                                    <div className="me-2 h-2.5 w-2.5 rounded-full bg-green-500"></div>{' '}
+                                    Online
+                                </div>
+                            </td>
+                            <td className="px-6 py-4">
+                                <a
+                                    href={`/users/${user.id}`}
+                                    className="font-medium text-blue-600 hover:underline dark:text-blue-500"
+                                >
+                                    Edit
+                                </a>
+                            </td>
+                        </tr>
+                    ))}
+                </Body>
+            </table>
+        </Authenticated>
+    );
+}