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

295 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Employee Profile</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">
<!-- Sidebar -->
<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 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="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>
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 text-slate-600 hover:bg-slate-50">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>
<!-- Main content -->
<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">
<!-- Breadcrumb -->
<nav class="flex items-center gap-2 text-sm">
<a href="03-employees.html" class="text-slate-500 hover:text-slate-700">Employees</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">Sarah Chen</span>
</nav>
<div class="flex items-center gap-3">
<button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
<span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
</button>
<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>
</div>
</header>
<main class="flex-1 overflow-y-auto p-6">
<!-- Action bar -->
<div class="flex items-center justify-between mb-6">
<div></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 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
More Actions
</button>
<button class="flex items-center gap-2 px-4 py-2 border border-red-200 rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
Deactivate
</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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
Edit Profile
</button>
</div>
</div>
<div class="grid grid-cols-3 gap-5">
<!-- Left: Profile card -->
<div class="col-span-1 space-y-4">
<!-- Main profile card -->
<div class="bg-white rounded-xl border border-slate-200 p-6 text-center hover:shadow-md transition-shadow">
<div class="relative inline-block mb-4">
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=256" class="w-24 h-24 rounded-full mx-auto" />
<span class="absolute bottom-1 right-1 w-5 h-5 bg-emerald-500 border-2 border-white rounded-full"></span>
</div>
<h2 class="text-lg font-bold text-slate-900">Sarah Chen</h2>
<p class="text-sm text-slate-500 mt-0.5">HR Administrator</p>
<div class="flex items-center justify-center gap-2 mt-2">
<span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-0.5 rounded-full font-medium">HR</span>
<span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<div class="mt-5 pt-5 border-t border-slate-100 space-y-3 text-left">
<div class="flex items-center gap-3">
<div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" /></svg>
</div>
<div>
<p class="text-xs text-slate-400">Employee ID</p>
<p class="text-sm font-medium text-slate-900">EMP-0024</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-slate-500" 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>
</div>
<div>
<p class="text-xs text-slate-400">Hire Date</p>
<p class="text-sm font-medium text-slate-900">March 15, 2021</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
<svg class="w-3.5 h-3.5 text-slate-500" 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>
</div>
<div>
<p class="text-xs text-slate-400">Location</p>
<p class="text-sm font-medium text-slate-900">San Francisco, CA</p>
</div>
</div>
</div>
</div>
<!-- Quick stats -->
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<h3 class="text-sm font-semibold text-slate-700 mb-3">Leave Balance</h3>
<div class="space-y-2.5">
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-500">Annual Leave</span>
<span class="font-medium text-slate-700">12 / 18 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-1.5">
<div class="bg-blue-500 h-1.5 rounded-full" style="width: 66%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-500">Sick Leave</span>
<span class="font-medium text-slate-700">2 / 10 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-1.5">
<div class="bg-amber-500 h-1.5 rounded-full" style="width: 20%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-500">Personal Leave</span>
<span class="font-medium text-slate-700">3 / 5 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-1.5">
<div class="bg-emerald-500 h-1.5 rounded-full" style="width: 60%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Right: Tabs + content -->
<div class="col-span-2 space-y-4">
<!-- Tabs -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<div class="flex border-b border-slate-200">
<button class="px-5 py-3.5 text-sm font-semibold text-blue-600 border-b-2 border-blue-600 bg-blue-50/50">Overview</button>
<button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Leave</button>
<button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Attendance</button>
<button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Payroll</button>
<button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Goals</button>
<button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Documents</button>
</div>
<div class="p-6 space-y-6">
<!-- Personal Info -->
<div>
<h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
<div class="w-6 h-6 bg-blue-50 rounded flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
</div>
Personal Information
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Work Email</p>
<p class="text-sm font-medium text-slate-900">sarah.chen@hrpanel.com</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Phone</p>
<p class="text-sm font-medium text-slate-900">+1 (555) 234-5678</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Date of Birth</p>
<p class="text-sm font-medium text-slate-900">November 11, 1992</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Gender</p>
<p class="text-sm font-medium text-slate-900">Female</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5 col-span-2">
<p class="text-xs text-slate-400 mb-0.5">Address</p>
<p class="text-sm font-medium text-slate-900">742 Evergreen Terrace, San Francisco, CA 94102</p>
</div>
</div>
</div>
<div class="h-px bg-slate-100"></div>
<!-- Job Info -->
<div>
<h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
<div class="w-6 h-6 bg-violet-50 rounded flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-violet-600" 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>
</div>
Job Information
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Department</p>
<p class="text-sm font-medium text-slate-900">Human Resources</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Manager</p>
<div class="flex items-center gap-2 mt-0.5">
<img src="https://ui-avatars.com/api/?name=Kevin+Walsh&background=1D4ED8&color=fff&size=64" class="w-5 h-5 rounded-full" />
<p class="text-sm font-medium text-slate-900">Kevin Walsh</p>
</div>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Work Location</p>
<p class="text-sm font-medium text-slate-900">Hybrid (SF Office)</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Employment Type</p>
<p class="text-sm font-medium text-slate-900">Full-time</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Annual Salary</p>
<p class="text-sm font-semibold text-slate-900">$92,000</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Tenure</p>
<p class="text-sm font-medium text-slate-900">5 years, 2 months</p>
</div>
</div>
</div>
<div class="h-px bg-slate-100"></div>
<!-- Emergency contact -->
<div>
<h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
<div class="w-6 h-6 bg-red-50 rounded flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-red-500" 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>
</div>
Emergency Contact
</h3>
<div class="grid grid-cols-3 gap-4">
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Name</p>
<p class="text-sm font-medium text-slate-900">Michael Chen</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Relationship</p>
<p class="text-sm font-medium text-slate-900">Spouse</p>
</div>
<div class="bg-slate-50 rounded-lg p-3.5">
<p class="text-xs text-slate-400 mb-0.5">Phone</p>
<p class="text-sm font-medium text-slate-900">+1 (555) 987-6543</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink