I'll build this admin user details page with tabs according to the specification. Let me first explore the existing codebase to understand the current patterns and components.
Let me read the key UI components I'll need for this implementation:
Let me also check the button, input, alert-dialog, and other relevant components:
Now I have all the context I need. Let me build the admin user details page with all the components according to the specification. I'll create the page structure with the admin layout, tabs, and all the required components.
Now let me update the root layout to add the background color to the html tag and update the main page to redirect to the admin user detail page for demonstration:
Now let me also read the label component to ensure it's available:
The label component is available. Let me verify the application is working correctly:
I've successfully built the admin user details page with the tabbed interface according to the specification. Here's a summary of what was created:
Admin User Detail Page (/admin/users/[id]):
Layout Components:
AdminHeader - Fixed red header with SkillCraft logo and user dropdown menuCollapsibleSidebar - Collapsible sidebar (16px default → 64px on hover) with navigation itemsThree Tabs Implementation:
Dialog Components:
BadgeGrantDialog - Form with course selection and completion date, includes validation (empty fields, future date check)BadgeRevokeDialog - Confirmation dialog with badge details displayFeatures:
useSearchParams and useRouteraria-sort, aria-live, role="alertdialog")