Let me build a complete admin panel with a dark sidebar, user management table, and roles/permissions system. I'll start by creating all the components.

Now let me add the font families to the tailwind config:

Now let me create the lib/utils.ts and all the components. I'll create them in parallel:

Now let me create all the admin panel components. I'll build the sidebar, header, stats, users table, roles panel, permissions matrix, and the main page.

Now let me create the activity log and settings placeholders, then wire up the main page:

Now let me wire everything together in the main page:

The admin panel is complete. Here's what was built:

• Dark theme with a blue primary accent, professional color tokens for success/warning/destructive states, and Inter + JetBrains Mono fonts.
• Collapsible sidebar with navigation across 6 sections: Overview, Users, Roles, Permissions, Activity, and Settings.
• Overview dashboard showing stats cards (total users, active, roles, suspended) with a recent users table and activity feed side by side.
• Users table with search, role/status filters, sortable columns, multi-select with bulk actions, inline action menus (edit/suspend/delete), and pagination.
• Roles panel displaying 4 role cards (Admin, Editor, Viewer, Moderator) with color-coded accents, descriptions, user counts, and hover-reveal edit/delete actions.
• Permissions matrix - a toggleable grid showing 12 permissions across 4 categories, where you can grant/revoke access per role with a single click.
• Activity log tracking admin actions with icon-coded event types, and a Settings panel with toggle switches for security, notifications, and compliance policies.