1 line
31 KiB
HTML
1 line
31 KiB
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">Hired History</h1><span class="whitespace-nowrap text-body-sm tabular-nums text-ink-4">5 on record</span><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">Who was hired, for which position, and what has happened since.</p></div></header><div class="space-y-3"><div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3"><div class="relative flex-1 min-w-0"><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-search absolute top-1/2 -translate-y-1/2 w-4 h-4 text-ink-4 pointer-events-none left-3.5" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input type="search" role="searchbox" placeholder="Search by name, position, client or department…" class="flex w-full bg-surface text-ink-1 transition-all duration-base ease-out border border-border shadow-xs placeholder:text-ink-4 outline-none focus-visible:border-krow-blue focus-visible:ring-2 focus-visible:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/20 file:border-0 file:bg-transparent file:text-body-sm file:font-medium file:text-ink-2 h-10 px-3.5 text-body-sm rounded-lg pl-10 pr-9 [&::-webkit-search-cancel-button]:hidden" value=""/></div><button class="inline-flex items-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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_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-9 px-4 text-body-sm rounded-lg sm:hidden justify-between"><span class="inline-flex items-center gap-2"><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-sliders-horizontal" aria-hidden="true"><line x1="21" x2="14" y1="4" y2="4"></line><line x1="10" x2="3" y1="4" y2="4"></line><line x1="21" x2="12" y1="12" y2="12"></line><line x1="8" x2="3" y1="12" y2="12"></line><line x1="21" x2="16" y1="20" y2="20"></line><line x1="12" x2="3" y1="20" y2="20"></line><line x1="14" x2="14" y1="2" y2="6"></line><line x1="8" x2="8" y1="10" y2="14"></line><line x1="16" x2="16" y1="18" y2="22"></line></svg>Filters</span></button><div class="flex-col sm:flex-row gap-3 sm:items-center hidden sm:flex"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-10 w-full items-center justify-between whitespace-nowrap rounded-lg border border-border bg-surface px-3.5 text-body-sm text-ink-1 shadow-xs transition-all duration-base ease-out data-[placeholder]:text-ink-4 outline-none focus:border-krow-blue focus:ring-2 focus:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 sm:w-auto sm:min-w-40" aria-label="Position"><span style="pointer-events:none"></span><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-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-10 w-full items-center justify-between whitespace-nowrap rounded-lg border border-border bg-surface px-3.5 text-body-sm text-ink-1 shadow-xs transition-all duration-base ease-out data-[placeholder]:text-ink-4 outline-none focus:border-krow-blue focus:ring-2 focus:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 sm:w-auto sm:min-w-40" aria-label="Department"><span style="pointer-events:none"></span><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-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-10 w-full items-center justify-between whitespace-nowrap rounded-lg border border-border bg-surface px-3.5 text-body-sm text-ink-1 shadow-xs transition-all duration-base ease-out data-[placeholder]:text-ink-4 outline-none focus:border-krow-blue focus:ring-2 focus:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 sm:w-auto sm:min-w-40" aria-label="Hired"><span style="pointer-events:none"></span><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-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div></div><div class="grid gap-3.5 sm:grid-cols-3"><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">Total hires</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-blue-50 text-blue-600 dark:bg-blue-950/60 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-award h-3.5 w-3.5" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div></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">5</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">Most recent hire</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-surface-subtle text-ink-3"><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-calendar-days h-3.5 w-3.5" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg></div></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">Jul 22, 2026</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">Sophia Chen</span><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">Avg time-to-hire</p><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-surface-subtle text-ink-3"><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" aria-hidden="true"><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 flex-wrap items-baseline gap-2"><span class="font-heading font-bold leading-none tabular-nums text-ink-1">2d</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">5 still active</span><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><section aria-labelledby="chronology" 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="chronology" class="font-heading text-body font-semibold text-ink-1">Recent hiring timeline</h2><span class="text-caption text-ink-4">Last 5 of 5</span></div></div><div class="transition-all duration-base ease-out bg-surface shadow-xs rounded-xl p-6 border border-border"><ol class="relative"><li class="relative flex gap-3.5 pb-5 last:pb-0"><div class="relative flex flex-col items-center shrink-0"><span class="grid place-items-center rounded-full ring-4 shrink-0 z-10 w-8 h-8 text-white bg-krow-blue ring-krow-blue/20"><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-user-check w-4 h-4" aria-hidden="true"><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><polyline points="16 11 18 13 22 9"></polyline></svg></span><span aria-hidden="true" class="w-px flex-1 bg-border mt-1.5 min-h-4"></span></div><div class="flex-1 min-w-0 -mt-1"><div class="flex items-start justify-between gap-2 flex-wrap"><div class="min-w-0"><p class="font-medium text-ink-1 text-body">Sophia Chen</p><p class="text-body-sm text-ink-3 mt-0.5 leading-relaxed">Guest Relations Lead</p></div><div class="flex items-center gap-2 shrink-0"><time class="text-caption text-ink-4 whitespace-nowrap">Jul 22, 2026</time></div></div></div></li><li class="relative flex gap-3.5 pb-5 last:pb-0"><div class="relative flex flex-col items-center shrink-0"><span class="grid place-items-center rounded-full ring-4 shrink-0 z-10 w-8 h-8 bg-surface-sunken text-ink-3 ring-white"><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-user-check w-4 h-4" aria-hidden="true"><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><polyline points="16 11 18 13 22 9"></polyline></svg></span><span aria-hidden="true" class="w-px flex-1 bg-border mt-1.5 min-h-4"></span></div><div class="flex-1 min-w-0 -mt-1"><div class="flex items-start justify-between gap-2 flex-wrap"><div class="min-w-0"><p class="font-medium text-ink-1 text-body">Oliver Bennett</p><p class="text-body-sm text-ink-3 mt-0.5 leading-relaxed">Event Coordinator</p></div><div class="flex items-center gap-2 shrink-0"><time class="text-caption text-ink-4 whitespace-nowrap">Jul 20, 2026</time></div></div></div></li><li class="relative flex gap-3.5 pb-5 last:pb-0"><div class="relative flex flex-col items-center shrink-0"><span class="grid place-items-center rounded-full ring-4 shrink-0 z-10 w-8 h-8 bg-surface-sunken text-ink-3 ring-white"><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-user-check w-4 h-4" aria-hidden="true"><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><polyline points="16 11 18 13 22 9"></polyline></svg></span><span aria-hidden="true" class="w-px flex-1 bg-border mt-1.5 min-h-4"></span></div><div class="flex-1 min-w-0 -mt-1"><div class="flex items-start justify-between gap-2 flex-wrap"><div class="min-w-0"><p class="font-medium text-ink-1 text-body">Aaliyah Patel</p><p class="text-body-sm text-ink-3 mt-0.5 leading-relaxed">Operations Supervisor</p></div><div class="flex items-center gap-2 shrink-0"><time class="text-caption text-ink-4 whitespace-nowrap">Jul 18, 2026</time></div></div></div></li><li class="relative flex gap-3.5 pb-5 last:pb-0"><div class="relative flex flex-col items-center shrink-0"><span class="grid place-items-center rounded-full ring-4 shrink-0 z-10 w-8 h-8 bg-surface-sunken text-ink-3 ring-white"><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-user-check w-4 h-4" aria-hidden="true"><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><polyline points="16 11 18 13 22 9"></polyline></svg></span><span aria-hidden="true" class="w-px flex-1 bg-border mt-1.5 min-h-4"></span></div><div class="flex-1 min-w-0 -mt-1"><div class="flex items-start justify-between gap-2 flex-wrap"><div class="min-w-0"><p class="font-medium text-ink-1 text-body">Lucas Wright</p><p class="text-body-sm text-ink-3 mt-0.5 leading-relaxed">Concierge Lead</p></div><div class="flex items-center gap-2 shrink-0"><time class="text-caption text-ink-4 whitespace-nowrap">Jul 15, 2026</time></div></div></div></li><li class="relative flex gap-3.5 pb-5 last:pb-0"><div class="relative flex flex-col items-center shrink-0"><span class="grid place-items-center rounded-full ring-4 shrink-0 z-10 w-8 h-8 bg-surface-sunken text-ink-3 ring-white"><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-user-check w-4 h-4" aria-hidden="true"><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><polyline points="16 11 18 13 22 9"></polyline></svg></span></div><div class="flex-1 min-w-0 -mt-1"><div class="flex items-start justify-between gap-2 flex-wrap"><div class="min-w-0"><p class="font-medium text-ink-1 text-body">Elena Rostova</p><p class="text-body-sm text-ink-3 mt-0.5 leading-relaxed">Lead Security Officer</p></div><div class="flex items-center gap-2 shrink-0"><time class="text-caption text-ink-4 whitespace-nowrap">Jul 12, 2026</time></div></div></div></li></ol></div></section><section aria-labelledby="records" 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="records" class="font-heading text-body font-semibold text-ink-1">Hired candidate records</h2><span class="text-caption text-ink-4">5 people</span></div></div><div class="space-y-4"><div class="transition-all duration-base ease-out glass-card border border-white/60 shadow-sm rounded-2xl p-0 relative overflow-hidden"><div class="overflow-x-auto"><table class="w-full min-w-[36rem] border-collapse"><caption class="sr-only">Everyone hired, with position, client, score and time-to-hire</caption><thead class=""><tr class="bg-surface-subtle border-b border-border"><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-left"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Candidate<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-left hidden md:table-cell"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Position<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-left hidden lg:table-cell"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Company<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-left hidden lg:table-cell"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Department<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-right"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Hired<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-right"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">AI score<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-right hidden lg:table-cell"><button type="button" class="inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset">Time to hire<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-chevrons-up-down w-3 h-3" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></th><th scope="col" class="px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap py-3 text-right">Status</th></tr></thead><tbody><tr class="border-b border-border last:border-0 transition-colors duration-fast cursor-pointer hover:bg-surface-subtle"><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left"><div class="flex min-w-0 items-center gap-2.5"><span class="relative inline-block shrink-0"><span class="relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none rounded-full bg-krow-blue text-white w-7 h-7 text-[10px]"><span aria-label="Sophia Chen">SC</span></span></span><div class="min-w-0"><p class="truncate font-medium text-ink-1">Sophia Chen</p><p class="truncate text-[10px] text-ink-4">sophia.chen@email.com</p></div></div></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden md:table-cell">Guest Relations Lead</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">—</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">Front Desk</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="whitespace-nowrap text-[11px] text-ink-4">Jul 22, 2026</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="font-semibold tabular-nums text-ink-1">90</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right hidden lg:table-cell">2d</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><div class="inline-flex items-center border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full gap-1.5">Hired</div></td></tr><tr class="border-b border-border last:border-0 transition-colors duration-fast cursor-pointer hover:bg-surface-subtle"><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left"><div class="flex min-w-0 items-center gap-2.5"><span class="relative inline-block shrink-0"><span class="relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none rounded-full bg-krow-blue text-white w-7 h-7 text-[10px]"><span aria-label="Oliver Bennett">OB</span></span></span><div class="min-w-0"><p class="truncate font-medium text-ink-1">Oliver Bennett</p><p class="truncate text-[10px] text-ink-4">oliver.b@email.com</p></div></div></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden md:table-cell">Event Coordinator</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">—</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">Event Manager</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="whitespace-nowrap text-[11px] text-ink-4">Jul 20, 2026</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="font-semibold tabular-nums text-ink-1">91</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right hidden lg:table-cell">3d</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><div class="inline-flex items-center border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full gap-1.5">Hired</div></td></tr><tr class="border-b border-border last:border-0 transition-colors duration-fast cursor-pointer hover:bg-surface-subtle"><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left"><div class="flex min-w-0 items-center gap-2.5"><span class="relative inline-block shrink-0"><span class="relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none rounded-full bg-krow-blue text-white w-7 h-7 text-[10px]"><span aria-label="Aaliyah Patel">AP</span></span></span><div class="min-w-0"><p class="truncate font-medium text-ink-1">Aaliyah Patel</p><p class="truncate text-[10px] text-ink-4">aaliyah.p@email.com</p></div></div></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden md:table-cell">Operations Supervisor</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">—</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">Housekeeping</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="whitespace-nowrap text-[11px] text-ink-4">Jul 18, 2026</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="font-semibold tabular-nums text-ink-1">87</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right hidden lg:table-cell">2d</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><div class="inline-flex items-center border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full gap-1.5">Hired</div></td></tr><tr class="border-b border-border last:border-0 transition-colors duration-fast cursor-pointer hover:bg-surface-subtle"><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left"><div class="flex min-w-0 items-center gap-2.5"><span class="relative inline-block shrink-0"><span class="relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none rounded-full bg-krow-blue text-white w-7 h-7 text-[10px]"><span aria-label="Lucas Wright">LW</span></span></span><div class="min-w-0"><p class="truncate font-medium text-ink-1">Lucas Wright</p><p class="truncate text-[10px] text-ink-4">lucas.w@email.com</p></div></div></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden md:table-cell">Concierge Lead</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">—</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">Front Desk</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="whitespace-nowrap text-[11px] text-ink-4">Jul 15, 2026</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="font-semibold tabular-nums text-ink-1">88</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right hidden lg:table-cell">2d</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><div class="inline-flex items-center border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full gap-1.5">Hired</div></td></tr><tr class="border-b border-border last:border-0 transition-colors duration-fast cursor-pointer hover:bg-surface-subtle"><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left"><div class="flex min-w-0 items-center gap-2.5"><span class="relative inline-block shrink-0"><span class="relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none rounded-full bg-krow-blue text-white w-7 h-7 text-[10px]"><span aria-label="Elena Rostova">ER</span></span></span><div class="min-w-0"><p class="truncate font-medium text-ink-1">Elena Rostova</p><p class="truncate text-[10px] text-ink-4">elena.r@email.com</p></div></div></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden md:table-cell">Lead Security Officer</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">—</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-left hidden lg:table-cell">Security</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="whitespace-nowrap text-[11px] text-ink-4">Jul 12, 2026</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><span class="font-semibold tabular-nums text-ink-1">95</span></td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right hidden lg:table-cell">1d</td><td class="px-4 text-body-sm text-ink-2 align-middle py-3.5 text-right"><div class="inline-flex items-center border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0 border-transparent bg-success-muted text-success h-[18px] px-1.5 text-[10px] rounded-full gap-1.5">Hired</div></td></tr></tbody></table></div></div><nav aria-label="Pagination" class="flex flex-wrap items-center justify-between gap-3"><div class="flex items-center gap-3"><p class="text-caption text-ink-3 tabular-nums">Showing <span class="font-medium text-ink-2">1–5</span> of <span class="font-medium text-ink-2">5</span></p><label class="flex items-center gap-1.5 text-caption text-ink-3"><span class="hidden sm:inline">Rows</span><select class="h-7 rounded-md border border-border bg-surface pl-2 pr-6 text-caption text-ink-2 focus-ring-inset cursor-pointer"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select></label></div></nav></div><p class="text-caption text-ink-4">Select a row to open the full record.</p></section></div> |