react-admin-panel

React Admin Panel Skill

Overview

This skill covers the React-based admin panel for managing users, games, and system data in the Game Critique project.

Technology Stack

• Framework: React 18.3.1 with TypeScript 5.6.3
• Build Tool: Vite 5.4.11
• Router: TanStack Router 1.121.24 (type-safe file-based routing)
• Server State: TanStack Query 5.62.2 (React Query)
• UI Framework: Tailwind CSS 3.4.16 with PostCSS
• Components: Radix UI primitives
• Forms: React Hook Form 7.54.1 with Zod 3.24.1
• GraphQL: Code generation with custom fetcher
• Authentication: Auth0 React SDK 2.2.4
• Icons: Lucide React 0.468.0
• Fonts: Geist font family

Project Structure

apps/web/src/
├── main.tsx                      # App entry point
├── globals.css                   # Global Tailwind styles
├── types.ts                      # GraphQL base types
├── routeTree.gen.ts             # Auto-generated route tree
├── routes/                       # TanStack Router routes
│   ├── __root.tsx               # Root layout
│   ├── _layout/                 # Nested layouts
│   └── _layout.tsx              # Layout component
├── features/                     # Feature modules
│   ├── admin/                   # Admin-specific features
│   │   └── users/               # User management
│   ├── auth/                    # Authentication
│   │   └── use_verify/          # User verification
│   └── layouts/                 # Layout components
│       └── providers/           # App providers
├── packages/                     # Shared packages
│   └── user_roles/              # User role management
├── lib/                         # Utilities
│   └── utils.ts                 # Helper functions
├── codegen/                     # GraphQL codegen config
│   └── fetcher.ts               # Custom GraphQL fetcher
└── assets/                      # Images, fonts, static files

TanStack Router

File-Based Routing

Routes are automatically generated from the file structure with full TypeScript support.

// routes/__root.tsx - Root layout
import { createRootRoute, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/router-devtools';

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});

Protected Routes with Auth Context

// main.tsx - Router setup with auth context
import { createRouter, RouterProvider } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({
  routeTree,
  context: {
    auth: undefined!,
  },
});

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function MainApp() {
  const { isAuthenticated } = useAuth0();
  const { data } = useVerifyUserQuery(undefined, {
    enabled: isAuthenticated,
  });

  return (
    <RouterProvider
      router={router}
      context={{
        auth: {
          isAuthenticated: data?.verify.authorized || false,
          role: data?.verify.role || null,
        },
      }}
    />
  );
}

Creating Routes

// routes/admin/users.tsx
import { createFileRoute } from '@tanstack/react-router';
import { z } from 'zod';

// Search params validation
const searchSchema = z.object({
  page: z.number().optional().default(1),
  search: z.string().optional(),
});

export const Route = createFileRoute('/admin/users')({
  validateSearch: searchSchema,
  beforeLoad: ({ context }) => {
    // Check auth
    if (!context.auth.isAuthenticated || context.auth.role !== 'ADMIN') {
      throw redirect({ to: '/' });
    }
  },
  component: UsersPage,
});

function UsersPage() {
  const { page, search } = Route.useSearch();
  
  return (
    <div>
      {/* Page content */}
    </div>
  );
}

Navigation

import { Link, useNavigate } from '@tanstack/react-router';

export function Navigation() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate({
      to: '/admin/users',
      search: { page: 1, search: 'john' },
    });
  };

  return (
    <nav>
      <Link to="/admin/users" search={{ page: 1 }}>
        Users
      </Link>
      <button onClick={handleClick}>Navigate</button>
    </nav>
  );
}

TanStack Query (React Query)

Setup with Providers

// features/layouts/providers/providers.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Auth0Provider } from '@auth0/auth0-react';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 1,
    },
  },
});

export function Providers({ children }) {
  return (
    <Auth0Provider
      domain={process.env.VITE_AUTH0_DOMAIN}
      clientId={process.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Auth0Provider>
  );
}

GraphQL Integration with Custom Fetcher

// codegen/fetcher.ts
import { useAuth0 } from '@auth0/auth0-react';

export async function fetchData<TData, TVariables>(
  query: string,
  variables?: TVariables,
  token?: string
): Promise<TData> {
  const response = await fetch('http://localhost:3001/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      ...(token && { Authorization: `Bearer ${token}` }),
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  const json = await response.json();

  if (json.errors) {
    throw new Error(json.errors[0].message);
  }

  return json.data;
}

Using Generated Hooks

# features/auth/use_verify/verify_user.graphql
query VerifyUser {
  verify {
    authorized
    role
  }
}

// Auto-generated hook usage
import { useVerifyUserQuery } from './verify_user.generated';

export function AuthCheck() {
  const { data, isLoading, error } = useVerifyUserQuery(undefined, {
    enabled: isAuthenticated,
    staleTime: 1000 * 60 * 10, // 10 minutes
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <div>
      {data?.verify.authorized ? 'Authorized' : 'Unauthorized'}
      {data?.verify.role && <span>Role: {data.verify.role}</span>}
    </div>
  );
}

Mutations

# packages/user_roles/use_update_user_role/update_user_role.graphql
mutation UpdateUserRole($userId: Int!, $role: String!) {
  updateUserRole(userId: $userId, role: $role) {
    success
    message
  }
}

import { useUpdateUserRoleMutation } from './update_user_role.generated';
import { useQueryClient } from '@tanstack/react-query';

export function UpdateRoleButton({ userId, newRole }) {
  const queryClient = useQueryClient();
  
  const { mutate, isPending } = useUpdateUserRoleMutation({
    onSuccess: () => {
      // Invalidate queries to refetch
      queryClient.invalidateQueries({ queryKey: ['Users'] });
      toast.success('Role updated successfully');
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });

  const handleUpdate = () => {
    mutate({ userId, role: newRole });
  };

  return (
    <button onClick={handleUpdate} disabled={isPending}>
      {isPending ? 'Updating...' : 'Update Role'}
    </button>
  );
}

Tailwind CSS & Styling

Configuration

// tailwind.config.js
export default {
  darkMode: ['class'],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        // ... more colors
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

Utility Function

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Component Styling

import { cn } from '@/lib/utils';

export function Card({ className, ...props }) {
  return (
    <div
      className={cn(
        'rounded-lg border bg-card text-card-foreground shadow-sm',
        className
      )}
      {...props}
    />
  );
}

Radix UI Components

Building Composable Components

// components/ui/dropdown-menu.tsx
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { cn } from '@/lib/utils';

export function DropdownMenu(props) {
  return <DropdownMenuPrimitive.Root {...props} />;
}

export function DropdownMenuTrigger({ className, ...props }) {
  return (
    <DropdownMenuPrimitive.Trigger
      className={cn('outline-none', className)}
      {...props}
    />
  );
}

export function DropdownMenuContent({ className, ...props }) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        className={cn(
          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 shadow-md',
          className
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  );
}

// Usage
export function UserMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="ghost">Options</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Logout</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );


---

*Content truncated.*