{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "compensation-band-benchmarking", "title": "Compensation Band Benchmarking", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/compensation-band-benchmarking/CompensationBandBenchmarking.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Award,\n BadgeCheck,\n Building2,\n CheckCircle2,\n Coins,\n DollarSign,\n Download,\n Layers,\n Scale,\n ShieldCheck,\n TrendingUp,\n Users,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface CompensationBandBenchmarkingProps extends React.HTMLAttributes {\n initialRole?: string\n}\n\ninterface LevelData {\n id: string\n code: string\n title: string\n roleTitle: string\n experience: string\n scope: string\n headcount: number\n p25Base: number\n p50Base: number\n p75Base: number\n p90Base: number\n equityMin: number\n equityMax: number\n equityP50: number\n totalMin: number\n totalMax: number\n totalP50: number\n compaRatio: number\n marketP50Base: number\n marketP50Equity: number\n marketP50Total: number\n equityPercent: number\n badgeVariant: 'default' | 'secondary' | 'outline' | 'info'\n}\n\nconst levels: LevelData[] = [\n {\n id: 'ic3',\n code: 'IC3',\n title: 'Software Engineer',\n roleTitle: 'Software Engineer (IC3)',\n experience: '1–3 yrs experience',\n scope: 'Feature delivery, component unit tests, and production code execution.',\n headcount: 28,\n p25Base: 135000,\n p50Base: 150000,\n p75Base: 168000,\n p90Base: 185000,\n equityMin: 35000,\n equityMax: 60000,\n equityP50: 45000,\n totalMin: 170000,\n totalMax: 245000,\n totalP50: 195000,\n compaRatio: 101.2,\n marketP50Base: 148000,\n marketP50Equity: 44000,\n marketP50Total: 192000,\n equityPercent: 23.1,\n badgeVariant: 'outline',\n },\n {\n id: 'ic4',\n code: 'IC4',\n title: 'Senior Engineer',\n roleTitle: 'Senior Software Engineer (IC4)',\n experience: '3–6 yrs experience',\n scope: 'Autonomous service ownership, technical RFC design, and mentoring.',\n headcount: 42,\n p25Base: 170000,\n p50Base: 190000,\n p75Base: 210000,\n p90Base: 230000,\n equityMin: 70000,\n equityMax: 110000,\n equityP50: 90000,\n totalMin: 240000,\n totalMax: 340000,\n totalP50: 280000,\n compaRatio: 101.8,\n marketP50Base: 187000,\n marketP50Equity: 88000,\n marketP50Total: 275000,\n equityPercent: 32.1,\n badgeVariant: 'secondary',\n },\n {\n id: 'ic5',\n code: 'IC5',\n title: 'Staff Engineer',\n roleTitle: 'Staff Software Engineer (IC5)',\n experience: '6–10 yrs experience',\n scope: 'Cross-team architecture, platform reliability, and engineering standards.',\n headcount: 18,\n p25Base: 205000,\n p50Base: 225000,\n p75Base: 250000,\n p90Base: 275000,\n equityMin: 120000,\n equityMax: 180000,\n equityP50: 140000,\n totalMin: 325000,\n totalMax: 455000,\n totalP50: 365000,\n compaRatio: 102.4,\n marketP50Base: 220000,\n marketP50Equity: 136000,\n marketP50Total: 356000,\n equityPercent: 38.4,\n badgeVariant: 'default',\n },\n {\n id: 'ic6',\n code: 'IC6',\n title: 'Senior Staff Engineer',\n roleTitle: 'Senior Staff Software Engineer (IC6)',\n experience: '10–14 yrs experience',\n scope: 'Org-wide strategic tech vision, high-scale resilience, and executive partnership.',\n headcount: 9,\n p25Base: 240000,\n p50Base: 265000,\n p75Base: 295000,\n p90Base: 330000,\n equityMin: 180000,\n equityMax: 280000,\n equityP50: 225000,\n totalMin: 420000,\n totalMax: 610000,\n totalP50: 490000,\n compaRatio: 103.1,\n marketP50Base: 258000,\n marketP50Equity: 218000,\n marketP50Total: 476000,\n equityPercent: 45.9,\n badgeVariant: 'info',\n },\n {\n id: 'ic7',\n code: 'IC7',\n title: 'Principal Engineer',\n roleTitle: 'Principal Software Engineer (IC7)',\n experience: '14+ yrs experience',\n scope: 'Company-level technology roadmap, deep R&D, and industry IP leadership.',\n headcount: 4,\n p25Base: 280000,\n p50Base: 315000,\n p75Base: 355000,\n p90Base: 400000,\n equityMin: 280000,\n equityMax: 450000,\n equityP50: 360000,\n totalMin: 560000,\n totalMax: 850000,\n totalP50: 675000,\n compaRatio: 104.0,\n marketP50Base: 305000,\n marketP50Equity: 345000,\n marketP50Total: 650000,\n equityPercent: 53.3,\n badgeVariant: 'default',\n },\n]\n\n// Scale configuration for multi-bar percentiles ($100k to $420k)\nconst SCALE_MIN = 100000\nconst SCALE_MAX = 420000\nconst SCALE_RANGE = SCALE_MAX - SCALE_MIN\n\nfunction getPercent(val: number): number {\n return Math.max(0, Math.min(100, ((val - SCALE_MIN) / SCALE_RANGE) * 100))\n}\n\nfunction fmtCurrency(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n }).format(val)\n}\n\nfunction fmtK(val: number): string {\n return `$${Math.round(val / 1000)}k`\n}\n\nfunction exportCsv() {\n const headers = [\n 'Level Code',\n 'Level Title',\n 'Experience Scope',\n 'Headcount',\n 'P25 Base Salary',\n 'P50 Base Salary (Median)',\n 'P75 Base Salary',\n 'P90 Base Salary',\n 'Equity Range Min',\n 'Equity Range Max',\n 'Median Annual Equity',\n 'Total Comp Min',\n 'Total Comp Max',\n 'Target Total Comp (P50)',\n 'Compa-Ratio (%)',\n ]\n\n const rows = levels.map((l) => [\n l.code,\n `\"${l.title}\"`,\n `\"${l.experience}\"`,\n l.headcount,\n l.p25Base,\n l.p50Base,\n l.p75Base,\n l.p90Base,\n l.equityMin,\n l.equityMax,\n l.equityP50,\n l.totalMin,\n l.totalMax,\n l.totalP50,\n l.compaRatio,\n ])\n\n const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows.map((e) => e.join(','))].join('\\n')\n const encodedUri = encodeURI(csvContent)\n const link = document.createElement('a')\n link.setAttribute('href', encodedUri)\n link.setAttribute('download', 'engineering-compensation-bands-q3-2026.csv')\n document.body.appendChild(link)\n link.click()\n document.body.removeChild(link)\n}\n\nexport function CompensationBandBenchmarking({\n className,\n initialRole = 'ic5',\n ...props\n}: CompensationBandBenchmarkingProps) {\n const [selectedRoleId, setSelectedRoleId] = React.useState(initialRole)\n\n const activeLevel = React.useMemo(() => {\n return levels.find((l) => l.id === selectedRoleId) || levels[2]\n }, [selectedRoleId])\n\n return (\n
\n {/* Main Header Card */}\n \n \n
\n {/* Title, Source Badge & Subtitle */}\n
\n
\n

\n Engineering Compensation Bands & Market Benchmarks\n

\n \n \n Q3 2026 Live Bands\n \n
\n

\n Pave Market Data · SF Bay Area Tier 1 · Q3 2026 (Refreshed Aug 2026 · Sample n = 42,400 Tech ICs)\n

\n
\n \n \n Benchmark Market: San Francisco Bay Area (Tier 1)\n \n \n \n Currency: USD ($) · Annualized\n \n \n \n Total Engineers Tracked:{' '}\n 101 Headcount\n \n
\n
\n\n {/* Controls: Role Selector & Export CSV Button */}\n
\n
\n \n \n
\n\n
\n \n \n Export Bands CSV\n \n
\n
\n
\n \n \n\n {/* 4 Compensation Summary Cards */}\n
\n {/* 1. Median Base Salary */}\n \n \n
\n
\n \n \n
\n Median Base Salary\n
\n \n {activeLevel.code} · P50 Market\n \n
\n \n \n
\n
\n
\n \n {fmtCurrency(activeLevel.p50Base)}\n \n / yr\n
\n
\n \n +2.3% Pave P50\n
\n
\n \n
\n\n
\n
\n Band Range (P25–P90):\n \n {fmtK(activeLevel.p25Base)} – {fmtK(activeLevel.p90Base)}\n \n
\n

\n Market baseline for {activeLevel.title} with {activeLevel.experience}.\n

\n
\n \n \n\n {/* 2. Median Annual Equity / RSU */}\n \n \n
\n
\n \n \n
\n \n Median Annual Equity / RSU\n \n
\n \n {activeLevel.equityPercent}% Total Comp\n \n
\n \n \n
\n
\n
\n \n {fmtCurrency(activeLevel.equityP50)}\n \n / yr\n
\n
\n 4-Yr Vesting\n
\n
\n \n
\n\n
\n
\n Annual Grant Band:\n \n {fmtK(activeLevel.equityMin)} – {fmtK(activeLevel.equityMax)} / yr\n \n
\n

\n Liquid RSU allocation (4-year vest, 1-year standard cliff).\n

\n
\n \n \n\n {/* 3. Target Total Compensation */}\n \n \n
\n
\n \n \n
\n \n Target Total Compensation\n \n
\n \n Base + Equity\n \n \n \n \n
\n
\n
\n \n {fmtCurrency(activeLevel.totalP50)}\n \n / yr\n
\n
\n \n +2.5% vs Mkt\n
\n
\n \n
\n\n
\n
\n Target Total Comp Range:\n \n {fmtK(activeLevel.totalMin)} – {fmtK(activeLevel.totalMax)}\n \n
\n

\n Annualized total compensation at P50 target execution.\n

\n
\n \n \n\n {/* 4. Internal Compa-Ratio */}\n \n \n
\n
\n \n \n
\n \n Internal Compa-Ratio\n \n
\n \n Market Competitive\n \n \n \n \n
\n
\n
\n \n {activeLevel.compaRatio}%\n \n Compa\n
\n
\n \n Target Corridor\n
\n
\n \n
\n\n
\n
\n Target Standard:\n 95.0% – 105.0%\n
\n

\n Pay positioning calibrated strictly inside safe competitive envelope.\n

\n
\n \n \n \n\n {/* Level Progression Compensation Matrix (Multi-bar percentile chart / table) */}\n \n \n
\n
\n
\n \n Level Progression Compensation Matrix\n
\n \n Multi-bar percentile bands (P25 → P50 → P75 → P90) and equity allocations across 5 engineering career\n levels.\n \n
\n
\n \n Scale: $100k → $420k Base\n \n \n 5 Levels · 101 Engineers\n \n
\n
\n \n \n {/* Scale Ruler Legend for Base Salary Multi-bar */}\n \n\n {/* Table Container with Multi-Bar Visualizers */}\n
\n
\n \n \n \n Level & Role Scope\n \n Base Salary Band (P25 → P50 → P75 → P90)\n \n Annual RSU Grant\n Target Total Comp (TTC)\n Headcount & Compa\n \n \n \n {levels.map((lvl) => (\n setSelectedRoleId(lvl.id)}\n >\n {/* Level Code & Title */}\n \n
\n
\n \n {lvl.code}\n \n {lvl.title}\n
\n

{lvl.experience}

\n

{lvl.scope}

\n
\n \n\n {/* Base Salary Band Multi-Bar Percentile Visualizer */}\n \n
\n {/* Visual Band Track */}\n
\n {/* P25 to P90 Range Shading */}\n \n\n {/* P50 to P75 Interquartile Core */}\n \n\n {/* P25 Marker Line */}\n \n\n {/* P50 Median Marker Dot */}\n \n\n {/* P75 Marker Line */}\n \n\n {/* P90 Marker Line */}\n \n
\n\n {/* Percentile Numeric Labels */}\n
\n \n P25: {fmtK(lvl.p25Base)}\n \n P50: {fmtK(lvl.p50Base)}\n \n P75: {fmtK(lvl.p75Base)}\n \n \n P90: {fmtK(lvl.p90Base)}\n \n
\n
\n \n\n {/* Annual Equity (RSU) */}\n \n
\n

\n {fmtK(lvl.equityMin)} – {fmtK(lvl.equityMax)}\n

\n

\n P50: {fmtCurrency(lvl.equityP50)} / yr\n

\n
\n \n\n {/* Target Total Comp (TTC) */}\n \n
\n

\n {fmtK(lvl.totalMin)} – {fmtK(lvl.totalMax)}\n

\n

\n Target P50: {fmtCurrency(lvl.totalP50)}\n

\n
\n \n\n {/* Headcount & Compa-Ratio */}\n \n
\n
\n \n {lvl.headcount} engineers\n
\n \n {lvl.compaRatio}% Compa\n \n
\n \n \n ))}\n \n
\n
\n
\n \n \n\n {/* Pay Equity & Fair Pay Audit Card */}\n \n \n
\n
\n
\n \n Pay Equity & Fair Pay Audit Certification\n
\n \n Independent statistical regression analysis evaluating compensation equity across gender, demographics,\n and level cohorts.\n \n
\n \n \n 99.8% Parity Ratio · Certified Fair Pay\n \n
\n \n \n {/* 4 Audit Sub-Metrics */}\n
\n
\n
\n Gender Pay Parity\n \n 100% Target\n \n
\n

99.8%

\n

\n Female-to-male comp ratio for equal job level and role scope.\n

\n
\n\n
\n
\n Demographic & URG Parity\n \n Parity Achieved\n \n
\n

100.1%

\n

\n Statistical comp ratio for underrepresented group cohorts.\n

\n
\n\n
\n
\n In-Band Compliance\n \n High Precision\n \n
\n

97.2%

\n

\n Employees placed strictly between approved P25 and P90 boundaries.\n

\n
\n\n
\n
\n Compression Gini Index\n \n Low Risk\n \n
\n

0.11

\n

\n Healthy inter-level step progression with zero pay overlap anomalies.\n

\n
\n
\n\n {/* Parity Safe-Harbor Distribution Meter */}\n
\n
\n \n Equal Pay Compliance Corridor (95.0% – 105.0%)\n \n \n Audit Status:{' '}\n Certified Safe Harbor (0.2% Variance)\n \n
\n\n {/* Visual Corridor Meter */}\n
\n {/* Disparity left zone (95-98%) */}\n
\n {/* Certified Equal Pay Zone (98-102%) */}\n
\n {/* Premium right zone (102-105%) */}\n
\n {/* Exact Company Parity Pin (99.8% -> 48% of bar) */}\n \n
\n\n
\n 95.0% (Underpaid Threshold)\n 99.8% (Current Company Parity)\n 100.0% (True Parity)\n 105.0% (Overpaid Threshold)\n
\n
\n\n {/* Certification Footer Note */}\n
\n
\n \n \n Certified by Independent PayParity Institute · Audit ID:{' '}\n #EQ-2026-SF-8841\n \n
\n \n Next Audit Recertification Scheduled: July 2027\n \n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CompensationBandBenchmarking.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Pave/Levels.fyi style engineering salary and equity compensation band visualizer with P25, P50, P75, P90 percentile ranges, level progression matrix, compa-ratio diagnostics, and certified pay equity audit.", "categories": [ "hr", "dashboard", "analytics", "app" ] }