test(admin): more user stuff to fronend admin stuff

frontend/src/components/navBar/Admin.tsx

@@ -1,5 +1,4 @@
 import { Server, Settings, User, type LucideIcon } from "lucide-react";
-import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { userAccess, type UserRoles } from "../../lib/authClient";
 import {
     SidebarGroup,
@@ -66,10 +65,6 @@ export default function Admin() {
                             </>
                         </SidebarMenuItem>
                     ))}
-
-                    {userAccess(null, ["systemAdmin"]) && (
-                        <TanStackRouterDevtools position="bottom-right" />
-                    )}
                 </SidebarMenu>
             </SidebarGroupContent>
         </SidebarGroup>

frontend/src/routeTree.gen.ts

@@ -8,15 +8,21 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
+import { createFileRoute } from '@tanstack/react-router'
+
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AdminLayoutRouteRouteImport } from './routes/_adminLayout/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
-import { Route as AdminLayoutAdminUsersRouteImport } from './routes/_adminLayout/admin/users'
 import { Route as AdminLayoutAdminSettingsRouteImport } from './routes/_adminLayout/admin/settings'
 import { Route as AdminLayoutAdminServersRouteImport } from './routes/_adminLayout/admin/servers'
 import { Route as authUserSignupRouteImport } from './routes/(auth)/user/signup'
 import { Route as authUserResetpasswordRouteImport } from './routes/(auth)/user/resetpassword'
+import { Route as AdminLayoutAdminUsersRouteRouteImport } from './routes/_adminLayout/admin/_users/route'
+import { Route as AdminLayoutAdminUsersUsersRouteImport } from './routes/_adminLayout/admin/_users/users'
+import { Route as AdminLayoutAdminUsersProdUsersRouteImport } from './routes/_adminLayout/admin/_users/prodUsers'
+
+const AdminLayoutAdminRouteImport = createFileRoute('/_adminLayout/admin')()
 
 const AdminLayoutRouteRoute = AdminLayoutRouteRouteImport.update({
   id: '/_adminLayout',
@@ -27,26 +33,26 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminLayoutAdminRoute = AdminLayoutAdminRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => AdminLayoutRouteRoute,
+} as any)
 const authLoginRoute = authLoginRouteImport.update({
   id: '/(auth)/login',
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AdminLayoutAdminUsersRoute = AdminLayoutAdminUsersRouteImport.update({
-  id: '/admin/users',
-  path: '/admin/users',
-  getParentRoute: () => AdminLayoutRouteRoute,
-} as any)
 const AdminLayoutAdminSettingsRoute =
   AdminLayoutAdminSettingsRouteImport.update({
-    id: '/admin/settings',
+    id: '/settings',
-    path: '/admin/settings',
+    path: '/settings',
-    getParentRoute: () => AdminLayoutRouteRoute,
+    getParentRoute: () => AdminLayoutAdminRoute,
   } as any)
 const AdminLayoutAdminServersRoute = AdminLayoutAdminServersRouteImport.update({
-  id: '/admin/servers',
+  id: '/servers',
-  path: '/admin/servers',
+  path: '/servers',
-  getParentRoute: () => AdminLayoutRouteRoute,
+  getParentRoute: () => AdminLayoutAdminRoute,
 } as any)
 const authUserSignupRoute = authUserSignupRouteImport.update({
   id: '/(auth)/user/signup',
@@ -58,65 +64,96 @@ const authUserResetpasswordRoute = authUserResetpasswordRouteImport.update({
   path: '/user/resetpassword',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminLayoutAdminUsersRouteRoute =
+  AdminLayoutAdminUsersRouteRouteImport.update({
+    id: '/_users',
+    getParentRoute: () => AdminLayoutAdminRoute,
+  } as any)
+const AdminLayoutAdminUsersUsersRoute =
+  AdminLayoutAdminUsersUsersRouteImport.update({
+    id: '/users',
+    path: '/users',
+    getParentRoute: () => AdminLayoutAdminUsersRouteRoute,
+  } as any)
+const AdminLayoutAdminUsersProdUsersRoute =
+  AdminLayoutAdminUsersProdUsersRouteImport.update({
+    id: '/prodUsers',
+    path: '/prodUsers',
+    getParentRoute: () => AdminLayoutAdminUsersRouteRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof authLoginRoute
+  '/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
   '/admin/servers': typeof AdminLayoutAdminServersRoute
   '/admin/settings': typeof AdminLayoutAdminSettingsRoute
-  '/admin/users': typeof AdminLayoutAdminUsersRoute
+  '/admin/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
+  '/admin/users': typeof AdminLayoutAdminUsersUsersRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof authLoginRoute
+  '/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
   '/admin/servers': typeof AdminLayoutAdminServersRoute
   '/admin/settings': typeof AdminLayoutAdminSettingsRoute
-  '/admin/users': typeof AdminLayoutAdminUsersRoute
+  '/admin/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
+  '/admin/users': typeof AdminLayoutAdminUsersUsersRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/_adminLayout': typeof AdminLayoutRouteRouteWithChildren
   '/(auth)/login': typeof authLoginRoute
+  '/_adminLayout/admin': typeof AdminLayoutAdminRouteWithChildren
+  '/_adminLayout/admin/_users': typeof AdminLayoutAdminUsersRouteRouteWithChildren
   '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
   '/(auth)/user/signup': typeof authUserSignupRoute
   '/_adminLayout/admin/servers': typeof AdminLayoutAdminServersRoute
   '/_adminLayout/admin/settings': typeof AdminLayoutAdminSettingsRoute
-  '/_adminLayout/admin/users': typeof AdminLayoutAdminUsersRoute
+  '/_adminLayout/admin/_users/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
+  '/_adminLayout/admin/_users/users': typeof AdminLayoutAdminUsersUsersRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
     | '/login'
+    | '/admin'
     | '/user/resetpassword'
     | '/user/signup'
     | '/admin/servers'
     | '/admin/settings'
+    | '/admin/prodUsers'
     | '/admin/users'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/login'
+    | '/admin'
     | '/user/resetpassword'
     | '/user/signup'
     | '/admin/servers'
     | '/admin/settings'
+    | '/admin/prodUsers'
     | '/admin/users'
   id:
     | '__root__'
     | '/'
     | '/_adminLayout'
     | '/(auth)/login'
+    | '/_adminLayout/admin'
+    | '/_adminLayout/admin/_users'
     | '/(auth)/user/resetpassword'
     | '/(auth)/user/signup'
     | '/_adminLayout/admin/servers'
     | '/_adminLayout/admin/settings'
-    | '/_adminLayout/admin/users'
+    | '/_adminLayout/admin/_users/prodUsers'
+    | '/_adminLayout/admin/_users/users'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -143,6 +180,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_adminLayout/admin': {
+      id: '/_adminLayout/admin'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof AdminLayoutAdminRouteImport
+      parentRoute: typeof AdminLayoutRouteRoute
+    }
     '/(auth)/login': {
       id: '/(auth)/login'
       path: '/login'
@@ -150,26 +194,19 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof authLoginRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_adminLayout/admin/users': {
-      id: '/_adminLayout/admin/users'
-      path: '/admin/users'
-      fullPath: '/admin/users'
-      preLoaderRoute: typeof AdminLayoutAdminUsersRouteImport
-      parentRoute: typeof AdminLayoutRouteRoute
-    }
     '/_adminLayout/admin/settings': {
       id: '/_adminLayout/admin/settings'
-      path: '/admin/settings'
+      path: '/settings'
       fullPath: '/admin/settings'
       preLoaderRoute: typeof AdminLayoutAdminSettingsRouteImport
-      parentRoute: typeof AdminLayoutRouteRoute
+      parentRoute: typeof AdminLayoutAdminRoute
     }
     '/_adminLayout/admin/servers': {
       id: '/_adminLayout/admin/servers'
-      path: '/admin/servers'
+      path: '/servers'
       fullPath: '/admin/servers'
       preLoaderRoute: typeof AdminLayoutAdminServersRouteImport
-      parentRoute: typeof AdminLayoutRouteRoute
+      parentRoute: typeof AdminLayoutAdminRoute
     }
     '/(auth)/user/signup': {
       id: '/(auth)/user/signup'
@@ -185,19 +222,67 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof authUserResetpasswordRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_adminLayout/admin/_users': {
+      id: '/_adminLayout/admin/_users'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof AdminLayoutAdminUsersRouteRouteImport
+      parentRoute: typeof AdminLayoutAdminRoute
+    }
+    '/_adminLayout/admin/_users/users': {
+      id: '/_adminLayout/admin/_users/users'
+      path: '/users'
+      fullPath: '/admin/users'
+      preLoaderRoute: typeof AdminLayoutAdminUsersUsersRouteImport
+      parentRoute: typeof AdminLayoutAdminUsersRouteRoute
+    }
+    '/_adminLayout/admin/_users/prodUsers': {
+      id: '/_adminLayout/admin/_users/prodUsers'
+      path: '/prodUsers'
+      fullPath: '/admin/prodUsers'
+      preLoaderRoute: typeof AdminLayoutAdminUsersProdUsersRouteImport
+      parentRoute: typeof AdminLayoutAdminUsersRouteRoute
+    }
   }
 }
 
-interface AdminLayoutRouteRouteChildren {
+interface AdminLayoutAdminUsersRouteRouteChildren {
+  AdminLayoutAdminUsersProdUsersRoute: typeof AdminLayoutAdminUsersProdUsersRoute
+  AdminLayoutAdminUsersUsersRoute: typeof AdminLayoutAdminUsersUsersRoute
+}
+
+const AdminLayoutAdminUsersRouteRouteChildren: AdminLayoutAdminUsersRouteRouteChildren =
+  {
+    AdminLayoutAdminUsersProdUsersRoute: AdminLayoutAdminUsersProdUsersRoute,
+    AdminLayoutAdminUsersUsersRoute: AdminLayoutAdminUsersUsersRoute,
+  }
+
+const AdminLayoutAdminUsersRouteRouteWithChildren =
+  AdminLayoutAdminUsersRouteRoute._addFileChildren(
+    AdminLayoutAdminUsersRouteRouteChildren,
+  )
+
+interface AdminLayoutAdminRouteChildren {
+  AdminLayoutAdminUsersRouteRoute: typeof AdminLayoutAdminUsersRouteRouteWithChildren
   AdminLayoutAdminServersRoute: typeof AdminLayoutAdminServersRoute
   AdminLayoutAdminSettingsRoute: typeof AdminLayoutAdminSettingsRoute
-  AdminLayoutAdminUsersRoute: typeof AdminLayoutAdminUsersRoute
+}
+
+const AdminLayoutAdminRouteChildren: AdminLayoutAdminRouteChildren = {
+  AdminLayoutAdminUsersRouteRoute: AdminLayoutAdminUsersRouteRouteWithChildren,
+  AdminLayoutAdminServersRoute: AdminLayoutAdminServersRoute,
+  AdminLayoutAdminSettingsRoute: AdminLayoutAdminSettingsRoute,
+}
+
+const AdminLayoutAdminRouteWithChildren =
+  AdminLayoutAdminRoute._addFileChildren(AdminLayoutAdminRouteChildren)
+
+interface AdminLayoutRouteRouteChildren {
+  AdminLayoutAdminRoute: typeof AdminLayoutAdminRouteWithChildren
 }
 
 const AdminLayoutRouteRouteChildren: AdminLayoutRouteRouteChildren = {
-  AdminLayoutAdminServersRoute: AdminLayoutAdminServersRoute,
+  AdminLayoutAdminRoute: AdminLayoutAdminRouteWithChildren,
-  AdminLayoutAdminSettingsRoute: AdminLayoutAdminSettingsRoute,
-  AdminLayoutAdminUsersRoute: AdminLayoutAdminUsersRoute,
 }
 
 const AdminLayoutRouteRouteWithChildren =

frontend/src/routes/__root.tsx

@@ -8,6 +8,8 @@ import Nav from "../components/navBar/Nav";
 import { ThemeProvider } from "../lib/providers/theme-provider";
 import { SidebarProvider } from "../components/ui/sidebar";
 import SideBarNav from "../components/navBar/SideBarNav";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { userAccess } from "../lib/authClient";
 
 interface RootRouteContext {
     queryClient: QueryClient;
@@ -34,6 +36,9 @@ const RootLayout = () => {
                             </SidebarProvider>
                         </div>
                         <Toaster expand richColors closeButton />
+                        {userAccess(null, ["systemAdmin"]) && (
+                            <TanStackRouterDevtools position="bottom-right" />
+                        )}
                     </div>
                 </ThemeProvider>
             </SessionGuard>

frontend/src/routes/_adminLayout/admin/_users/prodUsers.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_adminLayout/admin/_users/prodUsers')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_adminLayout/admin/_users/prodUsers"!</div>
+}

frontend/src/routes/_adminLayout/admin/_users/route.tsx

@@ -0,0 +1,30 @@
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_adminLayout/admin/_users")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <div>
+            <nav className="flex justify-center gap-3">
+                <Link
+                    to="/admin/users"
+                    className="[&.active]:font-bold [&.active]:underline"
+                    activeOptions={{
+                        exact: true,
+                    }}
+                >
+                    Users
+                </Link>
+                <Link
+                    to="/admin/prodUsers"
+                    className="[&.active]:font-bold [&.active]:underline"
+                >
+                    Prod Users
+                </Link>
+            </nav>
+            <Outlet />
+        </div>
+    );
+}

frontend/src/routes/_adminLayout/admin/_users/users.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_adminLayout/admin/_users/users")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return <div className="">Hello "/_admin/admin/users "!</div>;
+}

frontend/src/routes/_adminLayout/admin/users.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/_adminLayout/admin/users')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/_admin/admin/users"!</div>
-}