krow_talent_app/scripts/__baseline__/candidates-analysis.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">Candidates Analysis</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">Talent supply, quality distribution and pipeline risk.</p></div></header><div class="grid gap-3.5 grid-cols-2 sm:grid-cols-3 xl:grid-cols-5"><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">In pipeline</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">0</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Scored</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><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.5 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-amber-500 to-orange-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">At 80+</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><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.5 space-y-2"><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-indigo-500"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Avg score</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">—</span></div></div><div class="mt-3.5 space-y-2"><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-gray-400 to-gray-600"></div></div></div><div class="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"><div><div class="flex items-center justify-between gap-1.5"><p class="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">Risk flags</p></div><div class="mt-2 flex flex-wrap items-baseline gap-2"><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.5 space-y-2"><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><div class="grid gap-6 lg:grid-cols-5"><section aria-labelledby="dist" class="space-y-3 lg:col-span-2"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="dist" class="font-heading text-body font-semibold text-ink-1">Quality distribution</h2><span class="text-caption text-ink-4">0 candidates</span></div></div><div class="recharts-responsive-container" style="width:100%;height:200px;min-width:0"><div style="width:0;overflow-x:visible"></div></div><div class="space-y-1.5"></div></section><section aria-labelledby="strongest" class="space-y-3 lg:col-span-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="strongest" class="font-heading text-body font-semibold text-ink-1">Strongest candidates</h2><span class="text-caption text-ink-4">By AI score</span></div><button type="button" class="inline-flex items-center gap-0.5 rounded text-caption font-medium text-krow-blue transition-colors hover:underline
                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/50">All candidates<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-chevron-right h-3 w-3" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-0 divide-y divide-border overflow-hidden"><p class="px-4 py-8 text-center text-body-sm text-ink-3">No scored candidates yet.</p></div></section></div><section aria-labelledby="risk" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="risk" class="font-heading text-body font-semibold text-ink-1">Candidate risk</h2><span class="text-caption text-ink-4">No flags</span></div></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-0 overflow-hidden"><p class="px-4 py-8 text-center text-body-sm text-ink-3">No material risk flags. Credentials, availability and interview integrity all check out.</p></div><p class="text-caption text-ink-4">Flags are questions for a human, not rejections.</p></section><div class="grid gap-6 lg:grid-cols-5"><section aria-labelledby="skills" class="space-y-3 lg:col-span-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="skills" class="font-heading text-body font-semibold text-ink-1">Skill supply</h2><span class="text-caption text-ink-4">Top 0 across the scored pool</span></div></div><p class="text-body-sm text-ink-3">Nothing is scored yet, so there is no skill supply to read.</p><p class="text-caption text-ink-4">Bar length is how many candidates claim the skill. Darker blue means the people holding it average 75 or above.</p></section><section aria-labelledby="gaps" class="space-y-3 lg:col-span-2"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="gaps" class="font-heading text-body font-semibold text-ink-1">Skill gaps</h2><span class="text-caption text-ink-4">None</span></div></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-0 overflow-hidden"><p class="px-4 py-8 text-center text-body-sm text-ink-3">Every credential an open role requires is held by someone in the scored pool.</p></div></section></div><section aria-labelledby="fit" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="fit" class="font-heading text-body font-semibold text-ink-1">Position fit</h2><span class="text-caption text-ink-4">0 open roles</span></div></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-0 overflow-hidden"><div class="overflow-x-auto"><table class="w-full min-w-[40rem] border-collapse text-body-sm"><caption class="sr-only">Applicant supply against candidates clearing the bar, per open role</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">Role</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-right">Applied</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-right">Qualified</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-right">Avg score</th><th scope="col" class="whitespace-nowrap px-4 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-ink-4 text-right">Fit</th></tr></thead><tbody></tbody></table></div></div></section><section aria-labelledby="screening" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="screening" class="font-heading text-body font-semibold text-ink-1">Screening efficiency</h2></div></div><div class="grid gap-4 sm:grid-cols-3"><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-5"><p class="text-[11px] font-medium uppercase tracking-wide text-ink-4">Coverage</p><p class="mt-1 font-heading text-title-lg font-bold tabular-nums text-warning">0%</p><p class="mt-0.5 text-caption text-ink-3">0 of 0 scored</p></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-5"><p class="text-[11px] font-medium uppercase tracking-wide text-ink-4">Interview completion</p><p class="mt-1 font-heading text-title-lg font-bold tabular-nums text-ink-1">0%</p><p class="mt-0.5 text-caption text-ink-3">0 of 0 scored</p></div><div class="transition-all duration-base ease-out bg-surface border border-border shadow-xs rounded-xl p-5"><p class="text-[11px] font-medium uppercase tracking-wide text-ink-4">Quality lift</p><p class="mt-1 font-heading text-title-lg font-bold tabular-nums text-success">—</p><p class="mt-0.5 text-caption text-ink-3">hires vs pool average</p></div></div><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 text-ink-3 hover:bg-surface-sunken hover:text-ink-1 h-8 px-3 text-body-sm rounded-full w-fit">Full analytics <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" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></section></div>