krow_talent_app/scripts/__baseline__/control-center.pre-migration.html

<div class="space-y-6"><header class="flex flex-wrap items-center justify-between gap-4 border-b border-border/50 pb-4"><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5"><h1 class="font-heading text-title-lg font-bold tracking-tight text-ink-1 sm:text-2xl">Control Center</h1><span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-semibold text-blue-600 dark:bg-blue-950/60 dark:text-blue-400 border border-blue-200/60 dark:border-blue-800/40"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>Live System</span></div><p class="text-body-sm text-ink-3 font-normal">Workforce operations · hiring intelligence · platform health</p></div><div class="flex flex-wrap items-center gap-2.5"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all duration-base ease-out outline-none focus-visible:ring-2 focus-visible:ring-[#0838E0]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-border bg-surface text-ink-2 shadow-xs hover:border-krow-blue/40 hover:bg-krow-blue-tint hover:text-krow-blue h-8 px-3 text-body-sm rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg> Export</button></div></header><div class="grid grid-cols-2 gap-3.5 sm:grid-cols-3 xl:grid-cols-6"><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-indigo-200/50 dark:border-indigo-800/40 hover:border-indigo-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">Open positions</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-indigo-50/80 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2 h-3.5 w-3.5"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-indigo-600 dark:text-indigo-400">0</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0 total</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-indigo-500 to-blue-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-blue-200/50 dark:border-blue-800/40 hover:border-blue-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">Candidates</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-blue-50/80 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-3.5 w-3.5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-blue-600 dark:text-blue-400">0</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0 scored</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-blue-500 to-cyan-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-amber-200/50 dark:border-amber-800/40 hover:border-amber-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">In review</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-amber-50/80 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-amber-600 dark:text-amber-400">0</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0 unscreened</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-amber-500 to-orange-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-purple-200/50 dark:border-purple-800/40 hover:border-purple-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">AI screened</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-purple-50/80 dark:bg-purple-950/50 text-purple-600 dark:text-purple-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-3.5 w-3.5"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-purple-600 dark:text-purple-400">0</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0% coverage</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-purple-500 to-indigo-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-emerald-200/50 dark:border-emerald-800/40 hover:border-emerald-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">Hired</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-emerald-50/80 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-3.5 w-3.5"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-emerald-600 dark:text-emerald-400">0</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">0% of applicants</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-emerald-500 to-teal-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-blue-200/50 dark:border-blue-800/40 hover:border-blue-400"><div><div class="flex items-center justify-between gap-1.5"><span class="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">Avg KROW score</span><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-blue-50/80 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-3.5 w-3.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div></div><div class="mt-2 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-blue-600 dark:text-blue-400">—</span></div></div><div class="mt-3 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">none scored</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-blue-600 to-indigo-600"></div></div></div></div><section aria-labelledby="cc-activity" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-activity" class="font-heading text-body font-semibold text-ink-1">Hiring activity</h2><span class="text-caption text-ink-4">Applications, screening, interviews and hires · last 30 days, 3-day totals</span></div><div role="radiogroup" aria-label="Hiring activity range" class="inline-flex items-center gap-0.5 rounded-full border p-0.5 bg-surface-sunken border-border"><button type="button" role="radio" aria-checked="false" class="inline-flex items-center justify-center gap-1.5 rounded-full font-medium transition-all duration-base ease-out focus-ring-inset px-2.5 py-1 text-caption text-ink-3 hover:text-ink-1">7D</button><button type="button" role="radio" aria-checked="true" class="inline-flex items-center justify-center gap-1.5 rounded-full font-medium transition-all duration-base ease-out focus-ring-inset px-2.5 py-1 text-caption bg-krow-blue text-white shadow-sm">30D</button><button type="button" role="radio" aria-checked="false" class="inline-flex items-center justify-center gap-1.5 rounded-full font-medium transition-all duration-base ease-out focus-ring-inset px-2.5 py-1 text-caption text-ink-3 hover:text-ink-1">90D</button></div></div><div class="rounded-xl border border-border bg-surface px-2 py-4"><div class="px-2 py-8"><div class="flex flex-col items-center justify-center text-center py-14 px-6"><h3 class="font-heading text-ink-1 text-title">No applications yet</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Once candidates start applying, daily hiring activity appears here.</p></div></div></div></section><section aria-labelledby="cc-pipeline" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-pipeline" class="font-heading text-body font-semibold text-ink-1">Pipeline intelligence</h2><span class="text-caption text-ink-4">0 entered · conversion and drop-off by stage</span></div></div><div class="flex flex-col items-center justify-center text-center py-14 px-6"><h3 class="font-heading text-ink-1 text-title">Nothing in the pipeline</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Once candidates apply, stage conversion and drop-off appear here.</p></div></section><section aria-labelledby="cc-positions" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-positions" class="font-heading text-body font-semibold text-ink-1">Position performance</h2></div><button type="button" class="inline-flex items-center gap-0.5 rounded text-caption font-semibold text-krow-blue transition-colors
                 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50">View all positions<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="rounded-xl border border-border bg-surface px-2 py-4"><div class="px-2 py-8"><div class="flex flex-col items-center justify-center text-center py-14 px-6"><h3 class="font-heading text-ink-1 text-title">No open positions</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Publish a role and its hiring performance appears here.</p></div></div></div></section><section aria-labelledby="cc-actions" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-actions" class="font-heading text-body font-semibold text-ink-1">Action center</h2><span class="text-caption text-ink-4">All clear</span></div></div><div class="rounded-xl border border-border bg-surface px-4 py-8 text-center"><p class="text-body-sm text-ink-3">Nothing needs intervention. Every role has candidates, every applicant is scored, and no hire is awaiting review.</p></div></section><div class="grid gap-6 xl:grid-cols-2"><section aria-labelledby="cc-active" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-active" class="font-heading text-body font-semibold text-ink-1">Active positions</h2><span class="text-caption text-ink-4">0 hiring</span></div><button type="button" class="inline-flex items-center gap-0.5 rounded text-caption font-semibold text-krow-blue transition-colors
                 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50">View all<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex flex-col items-center justify-center text-center py-14 px-6"><h3 class="font-heading text-ink-1 text-title">No open positions</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Publish a role to start hiring.</p></div></section><section aria-labelledby="cc-talent" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-talent" class="font-heading text-body font-semibold text-ink-1">Top talent</h2></div><button type="button" class="inline-flex items-center gap-0.5 rounded text-caption font-semibold text-krow-blue transition-colors
                 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50">View all<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="flex flex-col items-center justify-center text-center py-14 px-6"><h3 class="font-heading text-ink-1 text-title">Nobody scored yet</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Screen the pipeline and the strongest candidates appear here.</p></div></section></div><section aria-labelledby="cc-recent" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2"><div class="flex items-baseline gap-2"><h2 id="cc-recent" class="font-heading text-body font-semibold text-ink-1">Recent activity</h2><span class="text-caption text-ink-4">0 events logged</span></div><button type="button" class="inline-flex items-center gap-0.5 rounded text-caption font-semibold text-krow-blue transition-colors
                 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50">View all<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="overflow-hidden rounded-xl border border-border bg-surface"><div class="overflow-x-auto"><table class="w-full min-w-[36rem] border-collapse"><caption class="sr-only">Most recent platform activity</caption><thead><tr class="border-b border-border bg-surface-subtle"><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-left">User</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-left">Action</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-left">Entity</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-left">Time</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-right">Role</th></tr></thead><tbody></tbody></table></div></div></section></div>