React

Model user records, roles, and account statuses with TypeScript types and create representative fixture data.

Render user records in an accessible Material UI table with typed, reusable row components.

Implement a controlled search input that filters users by name or email.

Derive filtered and sorted user collections without duplicating them in component state.

Implement pagination and clear interfaces for populated, empty, and no-match table results.

Configure a React Router route tree for the user list, user details, user editing, and fallback pages.

Render back-office pages within a nested layout using React Router's Outlet component.

Read and validate a route parameter to select the user displayed on a details page.

Store shareable search, filter, sort, and pagination state in URL search parameters.

Implement a protected-route boundary using a typed mock authentication session and role check.

Implement a typed mock user service that simulates asynchronous reads, updates, latency, and failures.

Configure TanStack Query and expose server-state access through a feature-specific query hook.

Present intentional loading, error, retry, empty, and success states for the user query.

Build a typed user form with React Hook Form and validate its values with a Zod schema.

Populate the form for user editing while handling defaults, dirty state, cancellation, and reset behavior.

Submit a mock user update with a TanStack Query mutation and invalidate the relevant cached queries.

Write a Vitest and React Testing Library test that verifies component behavior through user-visible interactions.

Test user-form validation and submission from the user's perspective.

Write an integration test for the user-management page that controls mocked loading, success, and failure responses.

Handle unexpected rendering failures with a React error boundary and a recoverable fallback interface.

Run linting, type checking, tests, and a production build as quality gates, then correct a project-structure violation found during review.