TenX PM
382 lines
26 KiB
HTML
382 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>HRPanel v3 — Applicant Pipeline</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
|
<style>body { font-family: 'Inter', sans-serif; }</style>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen">
|
|
<div class="flex h-screen overflow-hidden">
|
|
<aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
|
|
<div class="h-16 flex items-center px-5 border-b border-slate-100">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
|
</div>
|
|
<span class="font-bold text-slate-900 text-base">HRPanel</span>
|
|
<span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-3 py-4 space-y-0.5">
|
|
<a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
|
|
<a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
|
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
|
|
<a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
|
|
<a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
|
|
<a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
|
|
<a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
|
Recruitment
|
|
</a>
|
|
<a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
|
|
<a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
|
|
<div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
|
|
<a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
|
|
</nav>
|
|
<div class="px-3 py-4 border-t border-slate-100">
|
|
<div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
|
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
|
|
<p class="text-xs text-slate-500 truncate">HR Administrator</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
|
|
<nav class="flex items-center gap-2 text-sm">
|
|
<a href="08-recruitment.html" class="text-slate-500 hover:text-slate-700">Recruitment</a>
|
|
<svg class="w-4 h-4 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
|
|
<span class="font-medium text-slate-900">Senior React Developer</span>
|
|
</nav>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Open</span>
|
|
<span class="text-xs text-slate-500">8 applicants</span>
|
|
<button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
|
|
Add Applicant
|
|
</button>
|
|
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full cursor-pointer" />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 overflow-x-auto p-6">
|
|
<div class="flex gap-4 min-w-max h-full">
|
|
|
|
<!-- Applied Column -->
|
|
<div class="w-64 flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-slate-400"></div>
|
|
<span class="font-semibold text-slate-700 text-sm">Applied</span>
|
|
<span class="w-5 h-5 rounded-full bg-slate-200 text-slate-600 text-xs font-bold flex items-center justify-center">4</span>
|
|
</div>
|
|
<button class="w-6 h-6 rounded hover:bg-slate-200 flex items-center justify-center text-slate-400">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-y-auto">
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab active:cursor-grabbing group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Jordan+Blake&background=3B82F6&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Jordan Blake</p>
|
|
<p class="text-xs text-slate-500">Applied May 1</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Node.js</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-slate-500">
|
|
<span>5 yrs exp</span>
|
|
<span class="flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /></svg>
|
|
San Francisco
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Maya+Singh&background=8B5CF6&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Maya Singh</p>
|
|
<p class="text-xs text-slate-500">Applied May 3</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">GraphQL</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-slate-500">
|
|
<span>3 yrs exp</span>
|
|
<span>Remote</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Ethan+Ford&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Ethan Ford</p>
|
|
<p class="text-xs text-slate-500">Applied May 5</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">Redux</span>
|
|
<span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">AWS</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-slate-500">
|
|
<span>7 yrs exp</span>
|
|
<span>Austin, TX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Sofia+Reyes&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Sofia Reyes</p>
|
|
<p class="text-xs text-slate-500">Applied May 7</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-pink-50 text-pink-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-pink-50 text-pink-700 px-1.5 py-0.5 rounded font-medium">Vue.js</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-slate-500">
|
|
<span>4 yrs exp</span>
|
|
<span>New York</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Screening Column -->
|
|
<div class="w-64 flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-blue-400"></div>
|
|
<span class="font-semibold text-slate-700 text-sm">Screening</span>
|
|
<span class="w-5 h-5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold flex items-center justify-center">3</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-y-auto">
|
|
<div class="bg-white rounded-xl border border-blue-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Lucas+Martin&background=1D4ED8&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Lucas Martin</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 28</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TailwindCSS</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-slate-500 mb-2">
|
|
<span>6 yrs exp</span>
|
|
<span>Chicago</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-blue-600">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
|
|
Phone screen scheduled May 12
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Anika+Weiss&background=4F46E5&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Anika Weiss</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 30</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
|
|
</div>
|
|
<div class="text-xs text-slate-500">4 yrs exp · Remote</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Carlos+Rivera&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Carlos Rivera</p>
|
|
<p class="text-xs text-slate-500">Applied May 2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded font-medium">Python</span>
|
|
</div>
|
|
<div class="text-xs text-slate-500">8 yrs exp · Miami</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interview Column -->
|
|
<div class="w-64 flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-violet-400"></div>
|
|
<span class="font-semibold text-slate-700 text-sm">Interview</span>
|
|
<span class="w-5 h-5 rounded-full bg-violet-100 text-violet-700 text-xs font-bold flex items-center justify-center">2</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-y-auto">
|
|
<div class="bg-white rounded-xl border border-violet-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Ryan+Cooper&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Ryan Cooper</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 22</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">GraphQL</span>
|
|
<span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">AWS</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs mb-2">
|
|
<span class="text-slate-500">9 yrs exp</span>
|
|
<span class="flex items-center gap-1 text-emerald-600 font-medium">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
|
Strong match
|
|
</span>
|
|
</div>
|
|
<div class="text-xs text-violet-600 flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
|
Technical round — May 13, 2 PM
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Diana+Cho&background=0F766E&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Diana Cho</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 25</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-teal-50 text-teal-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-teal-50 text-teal-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
|
|
</div>
|
|
<div class="text-xs text-slate-500">5 yrs exp · Seattle</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offer Column -->
|
|
<div class="w-64 flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
|
|
<span class="font-semibold text-slate-700 text-sm">Offer</span>
|
|
<span class="w-5 h-5 rounded-full bg-amber-100 text-amber-700 text-xs font-bold flex items-center justify-center">1</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-y-auto">
|
|
<div class="bg-white rounded-xl border border-amber-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Owen+Walsh&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Owen Walsh</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 15</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
|
|
<span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">Node.js</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs mb-2">
|
|
<span class="text-slate-500">8 yrs exp</span>
|
|
</div>
|
|
<div class="bg-amber-50 border border-amber-100 rounded-lg px-2.5 py-1.5 text-xs text-amber-700">
|
|
Offer sent: $142K/yr · Awaiting response
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hired Column -->
|
|
<div class="w-64 flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
|
|
<span class="font-semibold text-slate-700 text-sm">Hired</span>
|
|
<span class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold flex items-center justify-center">1</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 space-y-3 overflow-y-auto">
|
|
<div class="bg-white rounded-xl border border-emerald-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="https://ui-avatars.com/api/?name=Alex+Morgan&background=2563EB&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-900">Alex Morgan</p>
|
|
<p class="text-xs text-slate-500">Applied Apr 1</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 mb-3">
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
|
|
<span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
|
|
</div>
|
|
<div class="bg-emerald-50 border border-emerald-100 rounded-lg px-2.5 py-1.5 text-xs text-emerald-700 flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
|
Starts May 1, 2026
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|