Redesigning Admin Components

Given an existing component (e.g. UserTable.tsx), produce a fully rewritten version that:

TypeScript
import { Users, Settings, ChevronRight } from 'lucide-react';
import { theme } from 'src/themes'; // only allowed theme source

export function UserPanel() {
  return (
    <div className="flex flex-col gap-3 rounded-xl p-4 bg-[var(--surface-glass)] backdrop-blur-md border border-[var(--border-flat)]"
         style={{ fontFamily: 'Outfit, sans-serif' }}>
      <header className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Users size={18} strokeWidth={2} />
          <span className="font-mono text-sm tracking-tight" style={{ fontFamily: 'JetBrains Mono, monospace' }}>
            USER_REGISTRY
          </span>
        </div>
        <Settings size={16} />
      </header>
      {/* rows, cards, etc. follow the same flat/glass/solid-color rules */}
    </div>
  );
}

No shadows anywhere (box-shadow: none enforced). No new icon packs beyond Lucide. No new theme files — only consume tokens exported from src/themes.

Progress:

• Step 1: Inventory the existing component's structure (data, interactions, states) — keep functionality, discard visuals.
• Step 2: Inspect src/themes for available color, spacing, radius, and font tokens. Do not invent new theme files or hardcode hex values not derived from theme tokens.
• Step 3: Pick ONE admin panel archetype at random (e.g. "command-deck", "data-cockpit", "ops-console", "fleet-dashboard", "ledger-grid") to anchor naming, density, and layout metaphor for this entire change set.
• Step 4: Apply the archetype consistently across every file touched in this session — same corner radius, same icon sizing scale, same spacing rhythm, same section-header pattern.
• Step 5: Replace all icons with Lucide equivalents (strokeWidth 2, consistent size scale: 14/16/18/20).
• Step 6: Strip all box-shadow, drop-shadow, elevation utilities. Replace depth cues with border + backdrop-blur + subtle opacity layering only.
• Step 7: Enforce solid colors for all accents, badges, buttons, status indicators — no gradients.
• Step 8: Apply glassmorphism: semi-transparent surface + backdrop-blur + thin solid-color border, kept compact (tight padding, small radii, dense line-height).
• Step 9: Set typography: JetBrains Mono for labels, data, IDs, timestamps, badges; Outfit for headings, body, navigation text.
• Step 10: Diff against the original — confirm zero visual resemblance (layout grid, spacing, color roles, component shapes all changed) while behavior/data contracts are preserved.
• Step 11: Verify no new skills, libraries, or theme files were introduced; only src/themes and Lucide are new imports.

Example 1: Input: A rounded card-based DashboardStats.tsx with soft shadows, pastel gradients, and Font Awesome icons, laid out as 4 stacked cards. Output: Rewritten as a "data-cockpit" archetype: a single flat glass panel with a dense 4-column mono-grid, each metric separated by 1px solid-color borders (from theme tokens), Lucide TrendingUp/Activity/Users/DollarSign icons at 16px, no shadows, no gradients — solid accent color per metric type, JetBrains Mono for the numeric values, Outfit for labels.

Example 2: Input: A sidebar navigation with drop-shadowed hover states and Material icons. Output: Rewritten as "command-deck" archetype: flat glass sidebar, 44px-tall compact rows, Lucide icons at 18px with solid active-state background (theme accent token, full opacity, no gradient), active item marked by a left 2px solid border instead of shadow, labels in Outfit, route paths/shortcuts in JetBrains Mono at 11px.