pankaj/hr-panel-v3-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5cc3a1e609b04e98ffe83d49ed4e6d4bfe7ed347
hr-panel-v3-designs/designs/08-recruitment.html
T
TenX PM 5cc3a1e609 deploy: hr-panel-v3-designs
2026-05-09 16:44:23 +00:00

299 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Recruitment</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">
<div class="relative">
<svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
<input type="text" placeholder="Search jobs..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
<span class="text-sm font-medium text-slate-900">Sarah Chen</span>
</div>
</header>
<main class="flex-1 overflow-y-auto p-6 space-y-5">
<div class="flex items-center justify-between">
<div>
<h1 class="text-xl font-bold text-slate-900">Recruitment</h1>
<p class="text-sm text-slate-500 mt-0.5">Manage job postings, applicants, and hiring pipelines</p>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
<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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
Reports
</button>
<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>
Post New Job
</button>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-white rounded-xl border border-slate-200 p-4">
<p class="text-2xl font-bold text-slate-900">3</p>
<p class="text-sm text-slate-500 mt-0.5">Open Positions</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4">
<p class="text-2xl font-bold text-slate-900">23</p>
<p class="text-sm text-slate-500 mt-0.5">Total Applicants</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4">
<p class="text-2xl font-bold text-blue-600">5</p>
<p class="text-sm text-slate-500 mt-0.5">In Interview Stage</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4">
<p class="text-2xl font-bold text-emerald-600">2</p>
<p class="text-sm text-slate-500 mt-0.5">Offers Sent</p>
</div>
</div>
<!-- Tabs -->
<div class="flex gap-1 bg-slate-100 p-1 rounded-xl w-fit">
<button class="px-4 py-2 bg-white rounded-lg text-sm font-semibold text-slate-900 shadow-sm">All Jobs</button>
<button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">Open</button>
<button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">On Hold</button>
<button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">Closed</button>
</div>
<!-- Job cards -->
<div class="space-y-4">
<!-- Job 1 -->
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex items-start gap-4">
<div class="w-11 h-11 bg-violet-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-violet-100">
<svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="font-semibold text-slate-900 text-base">Senior React Developer</h3>
<span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Open</span>
</div>
<div class="flex items-center gap-4 text-sm text-slate-500">
<span class="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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
Engineering
</span>
<span class="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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
San Francisco, CA (Hybrid)
</span>
<span class="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="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 2v2" /></svg>
2 openings
</span>
<span class="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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
$120K–$160K
</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 flex-shrink-0">
<div class="text-right">
<p class="text-lg font-bold text-slate-900">8</p>
<p class="text-xs text-slate-500">Applicants</p>
</div>
<a href="09-recruitment-kanban.html" 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">
View Applicants
<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="M9 5l7 7-7 7" /></svg>
</a>
</div>
</div>
<!-- Pipeline progress -->
<div class="mt-4 pt-4 border-t border-slate-100">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs text-slate-400 font-medium">Pipeline</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5 bg-slate-100 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-slate-400"></div>
<span class="text-xs font-medium text-slate-600">Applied</span>
<span class="text-xs font-bold text-slate-900">4</span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-blue-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-blue-400"></div>
<span class="text-xs font-medium text-blue-700">Screening</span>
<span class="text-xs font-bold text-blue-900">3</span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-violet-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-violet-400"></div>
<span class="text-xs font-medium text-violet-700">Interview</span>
<span class="text-xs font-bold text-violet-900">2</span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-amber-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-amber-400"></div>
<span class="text-xs font-medium text-amber-700">Offer</span>
<span class="text-xs font-bold text-amber-900">1</span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-emerald-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
<span class="text-xs font-medium text-emerald-700">Hired</span>
<span class="text-xs font-bold text-emerald-900">0</span>
</div>
</div>
</div>
</div>
<!-- Job 2 -->
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex items-start gap-4">
<div class="w-11 h-11 bg-blue-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-blue-100">
<svg class="w-5 h-5 text-blue-600" 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>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="font-semibold text-slate-900 text-base">HR Business Partner</h3>
<span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Open</span>
</div>
<div class="flex items-center gap-4 text-sm text-slate-500">
<span class="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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
Human Resources
</span>
<span class="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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
Remote (US)
</span>
<span>1 opening</span>
<span>$80K–$105K</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 flex-shrink-0">
<div class="text-right">
<p class="text-lg font-bold text-slate-900">3</p>
<p class="text-xs text-slate-500">Applicants</p>
</div>
<button class="flex items-center gap-2 border border-blue-600 text-blue-600 hover:bg-blue-50 text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
View Applicants
<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="M9 5l7 7-7 7" /></svg>
</button>
</div>
</div>
<div class="mt-4 pt-4 border-t border-slate-100">
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5 bg-slate-100 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-slate-400"></div>
<span class="text-xs font-medium text-slate-600">Applied <span class="font-bold text-slate-900">2</span></span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-violet-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-violet-400"></div>
<span class="text-xs font-medium text-violet-700">Interview <span class="font-bold text-violet-900">1</span></span>
</div>
<svg class="w-3 h-3 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>
<div class="flex items-center gap-1.5 bg-amber-50 rounded-lg px-2.5 py-1">
<div class="w-2 h-2 rounded-full bg-amber-400"></div>
<span class="text-xs font-medium text-amber-700">Offer <span class="font-bold text-amber-900">0</span></span>
</div>
</div>
</div>
</div>
<!-- Job 3 -->
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex items-start gap-4">
<div class="w-11 h-11 bg-amber-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-amber-100">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="font-semibold text-slate-900 text-base">Content Strategist</h3>
<span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-0.5 rounded-full font-medium border border-amber-100">On Hold</span>
</div>
<div class="flex items-center gap-4 text-sm text-slate-500">
<span class="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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
Marketing
</span>
<span class="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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
New York, NY (Onsite)
</span>
<span>1 opening</span>
<span>$65K–$85K</span>
</div>
</div>
</div>
<div class="flex items-center gap-3 flex-shrink-0">
<div class="text-right">
<p class="text-lg font-bold text-slate-900">12</p>
<p class="text-xs text-slate-500">Applicants</p>
</div>
<button class="flex items-center gap-2 border border-slate-200 text-slate-600 hover:bg-slate-50 text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
View Applicants
<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="M9 5l7 7-7 7" /></svg>
</button>
</div>
</div>
<div class="mt-3 pt-3 border-t border-slate-100">
<p class="text-xs text-amber-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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
Hiring paused — budget review in progress. Resume expected June 1, 2026.
</p>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink