pankaj/hr-panel-v3-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy: hr-panel-v3-designs

Browse Source
This commit is contained in:
TenX PM
2026-05-09 16:44:23 +00:00
commit 5cc3a1e609
19 changed files with 6038 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
designs/01-login.html
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Login</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; }
.pattern-dots {
background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
background-size: 24px 24px;
}
</style>
</head>
<body class="min-h-screen bg-slate-50 flex items-center justify-center p-4">
<div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden flex" style="min-height: 560px;">
<!-- Left brand panel -->
<div class="hidden md:flex flex-col justify-between w-2/5 bg-blue-600 p-10 pattern-dots relative">
<div>
<!-- Logo -->
<div class="flex items-center gap-3 mb-12">
<div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<span class="text-white font-bold text-xl tracking-tight">HRPanel</span>
</div>
<!-- Headline -->
<h1 class="text-white font-bold text-3xl leading-snug mb-4">
People management,<br />simplified.
</h1>
<p class="text-blue-200 text-sm leading-relaxed">
Manage your entire workforce — from hiring to payroll — in one beautifully designed platform built for modern HR teams.
</p>
</div>
<!-- Feature list -->
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-blue-100 text-sm">Smart leave & attendance tracking</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-blue-100 text-sm">Automated payroll processing</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-blue-100 text-sm">Performance & goal management</span>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-blue-100 text-sm">Recruitment & onboarding pipeline</span>
</div>
</div>
<!-- Decorative circles -->
<div class="absolute -bottom-16 -right-16 w-48 h-48 bg-white/5 rounded-full"></div>
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-white/5 rounded-full"></div>
</div>
<!-- Right login form -->
<div class="flex-1 flex flex-col justify-center px-8 md:px-12 py-10">
<!-- Mobile logo -->
<div class="flex items-center gap-2 mb-8 md:hidden">
<div class="w-9 h-9 bg-blue-600 rounded-xl 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-lg">HRPanel</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-1">Welcome back</h2>
<p class="text-slate-500 text-sm mb-8">Sign in to your HR workspace</p>
<form class="space-y-5">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Work email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input type="email" value="admin@hrpanel.com" class="w-full pl-9 pr-4 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="you@company.com" />
</div>
</div>
<div>
<div class="flex items-center justify-between mb-1.5">
<label class="block text-sm font-medium text-slate-700">Password</label>
<a href="#" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Forgot password?</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" value="Admin@123" class="w-full pl-9 pr-10 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="••••••••" />
<button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
<svg class="w-4 h-4 text-slate-400 hover:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div>
</div>
<div class="flex items-center gap-2">
<input id="remember" type="checkbox" checked class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" />
<label for="remember" class="text-sm text-slate-600">Remember me for 30 days</label>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
Sign in to HRPanel
<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="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
</form>
<!-- Demo accounts -->
<div class="mt-6 p-4 bg-slate-50 border border-slate-200 rounded-lg">
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Demo Accounts</p>
<div class="space-y-1.5">
<div class="flex items-center justify-between">
<span class="text-xs text-slate-600">Admin</span>
<span class="text-xs font-mono text-slate-700">admin@hrpanel.com / Admin@123</span>
</div>
<div class="flex items-center justify-between">
<span class="text-xs text-slate-600">Manager</span>
<span class="text-xs font-mono text-slate-700">manager@hrpanel.com / Manager@123</span>
</div>
<div class="flex items-center justify-between">
<span class="text-xs text-slate-600">Employee</span>
<span class="text-xs font-mono text-slate-700">emp@hrpanel.com / Emp@123</span>
</div>
</div>
</div>
<p class="mt-6 text-center text-xs text-slate-400">
&copy; 2026 HRPanel v3. All rights reserved.
</p>
</div>
</div>
</body>
</html>
designs/02-dashboard.html
+453
View File
@@ -0,0 +1,453 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Dashboard</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; }
.sidebar-item { @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors cursor-pointer; }
.sidebar-item.active { background-color: #EFF6FF; color: #2563EB; }
.bar { display: inline-block; width: 28px; border-radius: 4px 4px 0 0; background: #2563EB; }
.bar-light { background: #BFDBFE; }
</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">
<!-- Logo -->
<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 -->
<nav class="flex-1 px-3 py-4 space-y-0.5">
<a href="02-dashboard.html" class="sidebar-item active">
<svg class="w-4.5 h-4.5 w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
Dashboard
</a>
<a href="03-employees.html" class="sidebar-item">
<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="sidebar-item">
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
Departments
</a>
<a href="05-leave-management.html" class="sidebar-item">
<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="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>
Leave
</a>
<a href="06-attendance.html" class="sidebar-item">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
Attendance
</a>
<a href="07-payroll.html" class="sidebar-item">
<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="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>
Payroll
</a>
<a href="08-recruitment.html" class="sidebar-item">
<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="sidebar-item">
<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="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>
Performance
</a>
<a href="11-reports.html" class="sidebar-item">
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
Reports
</a>
<div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
<a href="12-settings.html" class="sidebar-item">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
Settings
</a>
</nav>
<!-- User card -->
<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>
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>
</div>
</div>
</aside>
<!-- Main content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top navbar -->
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
<div class="flex items-center gap-3">
<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 employees, docs..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 w-72 placeholder-slate-400" />
</div>
</div>
<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>
<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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
</button>
<div class="w-px h-6 bg-slate-200"></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" />
<div>
<p class="text-sm font-medium text-slate-900">Sarah Chen</p>
<p class="text-xs text-slate-500">Admin</p>
</div>
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
</div>
</div>
</header>
<!-- Scrollable content -->
<main class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- Greeting -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-slate-900">Good morning, Sarah! 👋</h1>
<p class="text-slate-500 text-sm mt-0.5">Friday, 9 May 2026 — Here's what's happening today.</p>
</div>
<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 Employee
</button>
</div>
<!-- KPI row -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
<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>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+4 this month</span>
</div>
<p class="text-3xl font-bold text-slate-900">142</p>
<p class="text-sm text-slate-500 mt-0.5">Total Employees</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
<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="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>
<span class="text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">2 returning</span>
</div>
<p class="text-3xl font-bold text-slate-900">8</p>
<p class="text-sm text-slate-500 mt-0.5">On Leave Today</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-rose-50 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-rose-600" 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>
<span class="text-xs font-medium text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full">Needs action</span>
</div>
<p class="text-3xl font-bold text-slate-900">5</p>
<p class="text-sm text-slate-500 mt-0.5">Pending Approvals</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" 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>
</div>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+2.1%</span>
</div>
<p class="text-3xl font-bold text-slate-900">$284.5K</p>
<p class="text-sm text-slate-500 mt-0.5">Monthly Payroll</p>
</div>
</div>
<!-- Row 2: Chart + Leave Requests -->
<div class="grid grid-cols-5 gap-4">
<!-- Attendance Overview Chart -->
<div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-5">
<div>
<h3 class="font-semibold text-slate-900 text-base">Attendance Overview</h3>
<p class="text-xs text-slate-500 mt-0.5">Last 7 days</p>
</div>
<div class="flex items-center gap-4 text-xs">
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#2563EB"></span>Present</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#BFDBFE"></span>Leave</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#FEE2E2"></span>Absent</span>
</div>
</div>
<!-- Bar chart -->
<div class="flex items-end justify-between gap-2 h-40">
<!-- Mon -->
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:110px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:12px;background:#BFDBFE;"></div>
<div class="w-full rounded-b" style="height:4px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Mon</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:105px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:16px;background:#BFDBFE;"></div>
<div class="w-full rounded-b" style="height:5px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Tue</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:118px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:10px;background:#BFDBFE;"></div>
<div class="w-full rounded-b" style="height:3px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Wed</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:100px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:18px;background:#BFDBFE;"></div>
<div class="w-full rounded-b" style="height:8px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Thu</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:115px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:12px;background:#BFDBFE;"></div>
<div class="w-full rounded-b" style="height:4px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Fri</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:30px;background:#E2E8F0;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:6px;background:#E2E8F0;"></div>
<div class="w-full rounded-b" style="height:2px;background:#E2E8F0;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Sat</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full flex flex-col items-center gap-0.5">
<div class="w-full rounded-t" style="height:24px;background:#E2E8F0;border-radius:4px 4px 0 0;"></div>
<div class="w-full" style="height:4px;background:#E2E8F0;"></div>
<div class="w-full rounded-b" style="height:2px;background:#E2E8F0;border-radius:0 0 4px 4px;"></div>
</div>
<span class="text-xs text-slate-400">Sun</span>
</div>
</div>
</div>
<!-- Leave Requests -->
<div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-slate-900 text-base">Leave Requests</h3>
<span class="text-xs bg-amber-100 text-amber-700 font-semibold px-2 py-0.5 rounded-full">5 pending</span>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-slate-900 truncate">James Liu</p>
<p class="text-xs text-slate-500">May 12–14 · Annual Leave</p>
</div>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
</button>
<button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
<img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-slate-900 truncate">Priya Sharma</p>
<p class="text-xs text-slate-500">May 15 · Sick Leave</p>
</div>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
</button>
<button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
<img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-slate-900 truncate">Michael Torres</p>
<p class="text-xs text-slate-500">May 18–22 · Annual Leave</p>
</div>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
</button>
<button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-slate-900 truncate">Elena Vasquez</p>
<p class="text-xs text-slate-500">May 20 · Personal Leave</p>
</div>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
</button>
<button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-slate-900 truncate">David Kim</p>
<p class="text-xs text-slate-500">May 23–25 · Annual Leave</p>
</div>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
</button>
<button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Row 3: Recent Hires + Quick Actions -->
<div class="grid grid-cols-5 gap-4">
<!-- Recent Hires -->
<div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-slate-900 text-base">Recent Hires</h3>
<a href="03-employees.html" class="text-xs text-blue-600 font-medium hover:text-blue-700">View all →</a>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
<img src="https://ui-avatars.com/api/?name=Alex+Morgan&background=2563EB&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
<p class="text-sm font-semibold text-slate-900">Alex Morgan</p>
<p class="text-xs text-slate-500">Frontend Engineer</p>
<span class="inline-block mt-1.5 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
<p class="text-xs text-slate-400 mt-1.5">Joined May 1, 2026</p>
</div>
<div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=7C3AED&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
<p class="text-sm font-semibold text-slate-900">Rachel Park</p>
<p class="text-xs text-slate-500">Product Designer</p>
<span class="inline-block mt-1.5 text-xs bg-purple-50 text-purple-700 px-2 py-0.5 rounded-full font-medium">Design</span>
<p class="text-xs text-slate-400 mt-1.5">Joined May 5, 2026</p>
</div>
<div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
<img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=059669&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
<p class="text-sm font-semibold text-slate-900">Nathan Hughes</p>
<p class="text-xs text-slate-500">Sales Executive</p>
<span class="inline-block mt-1.5 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
<p class="text-xs text-slate-400 mt-1.5">Joined May 8, 2026</p>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<h3 class="font-semibold text-slate-900 text-base mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 gap-3">
<button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-blue-300 hover:bg-blue-50/40 transition-colors group">
<div class="w-10 h-10 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center transition-colors">
<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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" /></svg>
</div>
<span class="text-xs font-medium text-slate-700">Add Employee</span>
</button>
<button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-emerald-300 hover:bg-emerald-50/40 transition-colors group">
<div class="w-10 h-10 bg-emerald-100 group-hover:bg-emerald-200 rounded-lg flex items-center justify-center transition-colors">
<svg class="w-5 h-5 text-emerald-600" 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>
</div>
<span class="text-xs font-medium text-slate-700">Run Payroll</span>
</button>
<button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-violet-300 hover:bg-violet-50/40 transition-colors group">
<div class="w-10 h-10 bg-violet-100 group-hover:bg-violet-200 rounded-lg flex items-center justify-center transition-colors">
<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="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>
<span class="text-xs font-medium text-slate-700">Post Job</span>
</button>
<button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-amber-300 hover:bg-amber-50/40 transition-colors group">
<div class="w-10 h-10 bg-amber-100 group-hover:bg-amber-200 rounded-lg flex items-center justify-center transition-colors">
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
</div>
<span class="text-xs font-medium text-slate-700">View Reports</span>
</button>
</div>
</div>
</div>
<!-- Birthdays & Anniversaries -->
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-slate-900 text-base flex items-center gap-2">
<span class="text-lg">🎂</span> Upcoming Birthdays &amp; Work Anniversaries
</h3>
<span class="text-xs text-slate-500">Next 7 days</span>
</div>
<div class="flex items-center gap-4 overflow-x-auto pb-1">
<div class="flex items-center gap-3 px-4 py-3 bg-blue-50 rounded-xl min-w-fit border border-blue-100">
<img src="https://ui-avatars.com/api/?name=Lisa+Park&background=DB2777&color=fff&size=64" class="w-9 h-9 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Lisa Park</p>
<p class="text-xs text-slate-500">Birthday — May 11</p>
</div>
<span class="text-xs bg-pink-100 text-pink-600 px-2 py-0.5 rounded-full font-medium ml-1">Tomorrow</span>
</div>
<div class="flex items-center gap-3 px-4 py-3 bg-amber-50 rounded-xl min-w-fit border border-amber-100">
<img src="https://ui-avatars.com/api/?name=Tom+Bradley&background=D97706&color=fff&size=64" class="w-9 h-9 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Tom Bradley</p>
<p class="text-xs text-slate-500">5-Year Anniversary — May 13</p>
</div>
<span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full font-medium ml-1">3 days</span>
</div>
<div class="flex items-center gap-3 px-4 py-3 bg-emerald-50 rounded-xl min-w-fit border border-emerald-100">
<img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=059669&color=fff&size=64" class="w-9 h-9 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Aisha Patel</p>
<p class="text-xs text-slate-500">Birthday — May 15</p>
</div>
<span class="text-xs bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-medium ml-1">6 days</span>
</div>
<div class="flex items-center gap-3 px-4 py-3 bg-violet-50 rounded-xl min-w-fit border border-violet-100">
<img src="https://ui-avatars.com/api/?name=Chris+Walton&background=7C3AED&color=fff&size=64" class="w-9 h-9 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Chris Walton</p>
<p class="text-xs text-slate-500">2-Year Anniversary — May 16</p>
</div>
<span class="text-xs bg-violet-100 text-violet-700 px-2 py-0.5 rounded-full font-medium ml-1">7 days</span>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/03-employees.html
+422
View File
@@ -0,0 +1,422 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Employees</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 hover:text-slate-900 transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
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 transition-colors">
<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 hover:text-slate-900 transition-colors">
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
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 hover:text-slate-900 transition-colors">
<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="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>
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 hover:text-slate-900 transition-colors">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
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 hover:text-slate-900 transition-colors">
<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="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>
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 hover:text-slate-900 transition-colors">
<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 hover:text-slate-900 transition-colors">
<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="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>
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 hover:text-slate-900 transition-colors">
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
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 hover:text-slate-900 transition-colors">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
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>
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>
</div>
</div>
</aside>
<!-- Main content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top navbar -->
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
<div class="flex items-center gap-3">
<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 employees..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 w-72 placeholder-slate-400" />
</div>
</div>
<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="w-px h-6 bg-slate-200"></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" />
<div>
<p class="text-sm font-medium text-slate-900">Sarah Chen</p>
<p class="text-xs text-slate-500">Admin</p>
</div>
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
</div>
</div>
</header>
<main class="flex-1 overflow-y-auto p-6">
<!-- Page header -->
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-xl font-bold text-slate-900">Employees</h1>
<p class="text-sm text-slate-500 mt-0.5">142 total employees across all departments</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 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export
</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>
Add Employee
</button>
</div>
</div>
<!-- Filters -->
<div class="bg-white border border-slate-200 rounded-xl p-4 mb-5 flex items-center gap-3 flex-wrap">
<div class="relative flex-1 min-w-48">
<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 by name, email, role..." class="w-full pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>All Departments</option>
<option>Engineering</option>
<option>Design</option>
<option>Marketing</option>
<option>Sales</option>
<option>HR</option>
<option>Finance</option>
<option>Operations</option>
</select>
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>All Status</option>
<option>Active</option>
<option>On Leave</option>
<option>Inactive</option>
</select>
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>All Roles</option>
<option>Manager</option>
<option>Senior</option>
<option>Junior</option>
<option>Intern</option>
</select>
<button class="px-3 py-2 text-sm text-slate-500 hover:text-slate-700 font-medium">Clear filters</button>
</div>
<!-- Employee grid -->
<div class="grid grid-cols-4 gap-4 mb-6">
<!-- Employee cards -->
<a href="04-employee-profile.html" class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Sarah Chen</h3>
<p class="text-xs text-slate-500 mt-0.5">HR Administrator</p>
<span class="inline-block mt-2 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">HR</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
sarah.chen@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 234-5678
</div>
</div>
</a>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">James Liu</h3>
<p class="text-xs text-slate-500 mt-0.5">Senior Engineer</p>
<span class="inline-block mt-2 text-xs bg-violet-50 text-violet-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
james.liu@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 345-6789
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">On Leave</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Priya Sharma</h3>
<p class="text-xs text-slate-500 mt-0.5">Product Manager</p>
<span class="inline-block mt-2 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Product</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
priya.s@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 456-7890
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Michael Torres</h3>
<p class="text-xs text-slate-500 mt-0.5">Sales Director</p>
<span class="inline-block mt-2 text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
m.torres@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 567-8901
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Elena Vasquez</h3>
<p class="text-xs text-slate-500 mt-0.5">UX Designer</p>
<span class="inline-block mt-2 text-xs bg-pink-50 text-pink-700 px-2 py-0.5 rounded-full font-medium">Design</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
elena.v@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 678-9012
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">David Kim</h3>
<p class="text-xs text-slate-500 mt-0.5">DevOps Engineer</p>
<span class="inline-block mt-2 text-xs bg-cyan-50 text-cyan-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
david.kim@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 789-0123
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=0F766E&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Aisha Patel</h3>
<p class="text-xs text-slate-500 mt-0.5">Finance Manager</p>
<span class="inline-block mt-2 text-xs bg-teal-50 text-teal-700 px-2 py-0.5 rounded-full font-medium">Finance</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
aisha.p@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 890-1234
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Tom+Bradley&background=B45309&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium border border-slate-200">Inactive</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Tom Bradley</h3>
<p class="text-xs text-slate-500 mt-0.5">Marketing Lead</p>
<span class="inline-block mt-2 text-xs bg-orange-50 text-orange-700 px-2 py-0.5 rounded-full font-medium">Marketing</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
tom.b@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 901-2345
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Rachel Park</h3>
<p class="text-xs text-slate-500 mt-0.5">Product Designer</p>
<span class="inline-block mt-2 text-xs bg-violet-50 text-violet-700 px-2 py-0.5 rounded-full font-medium">Design</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
rachel.p@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 012-3456
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Nathan Hughes</h3>
<p class="text-xs text-slate-500 mt-0.5">Sales Executive</p>
<span class="inline-block mt-2 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
nathan.h@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 123-4567
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Chris+Walton&background=1D4ED8&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Chris Walton</h3>
<p class="text-xs text-slate-500 mt-0.5">Backend Engineer</p>
<span class="inline-block mt-2 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
chris.w@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 234-5670
</div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
<div class="flex items-start justify-between mb-4">
<img src="https://ui-avatars.com/api/?name=Lisa+Park&background=9D174D&color=fff&size=128" class="w-12 h-12 rounded-full" />
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Lisa Park</h3>
<p class="text-xs text-slate-500 mt-0.5">Operations Manager</p>
<span class="inline-block mt-2 text-xs bg-rose-50 text-rose-700 px-2 py-0.5 rounded-full font-medium">Operations</span>
<div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
lisa.p@hrpanel.com
</div>
<div class="flex items-center gap-1.5 text-xs text-slate-500">
<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>
+1 (555) 345-6780
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="flex items-center justify-between bg-white border border-slate-200 rounded-xl px-5 py-3.5">
<p class="text-sm text-slate-500">Showing <span class="font-medium text-slate-700">1–12</span> of <span class="font-medium text-slate-700">142</span> employees</p>
<div class="flex items-center gap-1">
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled>
<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="M15 19l-7-7 7-7" /></svg>
</button>
<button class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-semibold">1</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">2</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">3</button>
<span class="text-slate-400 text-sm px-1">...</span>
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">12</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 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 5l7 7-7 7" /></svg>
</button>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/04-employee-profile.html
+294
View File
@@ -0,0 +1,294 @@
<!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>
designs/05-leave-management.html
+339
View File
@@ -0,0 +1,339 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Leave Management</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 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 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="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>
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>
<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 employees..." 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-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">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-xl font-bold text-slate-900">Leave Management</h1>
<p class="text-sm text-slate-500 mt-0.5">Review and manage employee leave requests</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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export
</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>
New Leave Request
</button>
</div>
</div>
<!-- Stats row -->
<div class="grid grid-cols-4 gap-4 mb-5">
<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 This Month</p>
</div>
<div class="bg-white rounded-xl border border-amber-200 p-4 bg-amber-50/30">
<p class="text-2xl font-bold text-amber-600">5</p>
<p class="text-sm text-slate-500 mt-0.5">Pending Review</p>
</div>
<div class="bg-white rounded-xl border border-emerald-200 p-4 bg-emerald-50/30">
<p class="text-2xl font-bold text-emerald-600">16</p>
<p class="text-sm text-slate-500 mt-0.5">Approved</p>
</div>
<div class="bg-white rounded-xl border border-red-200 p-4 bg-red-50/30">
<p class="text-2xl font-bold text-red-500">2</p>
<p class="text-sm text-slate-500 mt-0.5">Rejected</p>
</div>
</div>
<!-- Filter tabs + table -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<!-- Tabs -->
<div class="flex items-center border-b border-slate-200 px-5 gap-1">
<button class="px-4 py-3.5 text-sm font-semibold text-blue-600 border-b-2 border-blue-600">All Requests</button>
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
Pending
<span class="bg-amber-100 text-amber-700 text-xs font-bold px-1.5 py-0.5 rounded-full">5</span>
</button>
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Approved</button>
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Rejected</button>
<div class="flex-1"></div>
<div class="flex items-center gap-2 py-2">
<select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
<option>All Leave Types</option>
<option>Annual Leave</option>
<option>Sick Leave</option>
<option>Personal Leave</option>
<option>Maternity Leave</option>
</select>
<select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
<option>May 2026</option>
<option>April 2026</option>
<option>March 2026</option>
</select>
</div>
</div>
<!-- Table -->
<table class="w-full">
<thead>
<tr class="bg-slate-50 border-b border-slate-200">
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Leave Type</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Duration</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Days</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Reason</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">James Liu</p>
<p class="text-xs text-slate-500">Engineering</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 12 – May 14</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Family vacation planned since...</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-4">
<div class="flex items-center gap-2">
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Priya Sharma</p>
<p class="text-xs text-slate-500">Product</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 15</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Not feeling well, fever since...</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-4">
<div class="flex items-center gap-2">
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Michael Torres</p>
<p class="text-xs text-slate-500">Sales</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 18 – May 22</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">5</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Annual family holiday trip to...</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
<td class="px-4 py-4">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Elena Vasquez</p>
<p class="text-xs text-slate-500">Design</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-violet-50 text-violet-700 px-2.5 py-1 rounded-full font-medium">Personal Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 20</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Personal appointment at...</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-4">
<div class="flex items-center gap-2">
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">David Kim</p>
<p class="text-xs text-slate-500">Engineering</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 23 – May 25</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Long weekend trip, all tasks...</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-4">
<div class="flex items-center gap-2">
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=0F766E&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Aisha Patel</p>
<p class="text-xs text-slate-500">Finance</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-pink-50 text-pink-700 px-2.5 py-1 rounded-full font-medium">Maternity Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">Jun 1 – Aug 30</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">65</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Maternity leave as per policy</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
<td class="px-4 py-4">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Nathan Hughes</p>
<p class="text-xs text-slate-500">Sales</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 7 – May 8</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">2</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Flu, doctor prescribed rest...</td>
<td class="px-4 py-4"><span class="text-xs bg-red-50 text-red-600 px-2.5 py-1 rounded-full font-medium border border-red-100">Rejected</span></td>
<td class="px-4 py-4">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Rachel Park</p>
<p class="text-xs text-slate-500">Design</p>
</div>
</div>
</td>
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
<td class="px-4 py-4 text-sm text-slate-700">May 28 – May 30</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Attending a design conference...</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-4">
<div class="flex items-center gap-2">
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Table footer -->
<div class="px-5 py-3.5 border-t border-slate-100 flex items-center justify-between">
<p class="text-sm text-slate-500">Showing 1–8 of 23 requests</p>
<div class="flex items-center gap-1">
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled>
<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="M15 19l-7-7 7-7" /></svg>
</button>
<button class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-semibold">1</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">2</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">3</button>
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 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 5l7 7-7 7" /></svg>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/06-attendance.html
+371
View File
@@ -0,0 +1,371 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Attendance</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 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 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
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>
<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 employees..." 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-3">
<!-- Clock In/Out button - prominent -->
<div class="flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2">
<div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
<span class="text-sm text-emerald-700 font-medium">Clocked in at 9:02 AM</span>
</div>
<button class="flex items-center gap-2 bg-red-600 hover:bg-red-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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
Clock Out
</button>
<div class="w-px h-6 bg-slate-200"></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>
</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">Attendance Tracking</h1>
<p class="text-sm text-slate-500 mt-0.5">Monitor daily attendance, clock-ins, and work hours</p>
</div>
<div class="flex items-center gap-3">
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>May 2026</option>
<option>April 2026</option>
</select>
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export
</button>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<div class="flex items-center gap-3 mb-1">
<div class="w-8 h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<span class="text-xs text-slate-500 font-medium">Present Today</span>
</div>
<p class="text-2xl font-bold text-slate-900">127</p>
<p class="text-xs text-emerald-600 font-medium mt-0.5">89.4% attendance rate</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<div class="flex items-center gap-3 mb-1">
<div class="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<span class="text-xs text-slate-500 font-medium">Absent</span>
</div>
<p class="text-2xl font-bold text-slate-900">8</p>
<p class="text-xs text-red-500 font-medium mt-0.5">3 unexcused</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<div class="flex items-center gap-3 mb-1">
<div class="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-amber-600" 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>
<span class="text-xs text-slate-500 font-medium">Late Arrivals</span>
</div>
<p class="text-2xl font-bold text-slate-900">4</p>
<p class="text-xs text-amber-600 font-medium mt-0.5">Avg 18 min late</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<div class="flex items-center gap-3 mb-1">
<div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" 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>
<span class="text-xs text-slate-500 font-medium">On Leave</span>
</div>
<p class="text-2xl font-bold text-slate-900">3</p>
<p class="text-xs text-blue-600 font-medium mt-0.5">Approved leaves</p>
</div>
</div>
<!-- Calendar + Today table -->
<div class="grid grid-cols-5 gap-4">
<!-- Calendar -->
<div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-slate-900">May 2026</h3>
<div class="flex items-center gap-2">
<button class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-50">
<svg class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
</button>
<button class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-50">
<svg class="w-4 h-4 text-slate-600" 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>
<!-- Legend -->
<div class="flex items-center gap-4 mb-4 text-xs">
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-emerald-400 inline-block"></span>Present</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-red-400 inline-block"></span>Absent</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-amber-400 inline-block"></span>Late</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-blue-400 inline-block"></span>Leave</span>
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-slate-200 inline-block"></span>Weekend</span>
</div>
<!-- Calendar grid -->
<div class="grid grid-cols-7 gap-1">
<div class="text-center text-xs text-slate-400 font-medium py-1">Mon</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Tue</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Wed</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Thu</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Fri</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Sat</div>
<div class="text-center text-xs text-slate-400 font-medium py-1">Sun</div>
<!-- Week 1: Apr 28-May 4 -->
<div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">28</div>
<div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">29</div>
<div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">30</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">1</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">2</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">3</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">4</div>
<!-- Week 2: May 5-11 -->
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">5</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">6</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-red-100 text-red-700 font-medium cursor-pointer hover:bg-red-200">7</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">8</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-amber-100 text-amber-800 font-medium cursor-pointer hover:bg-amber-200 ring-2 ring-blue-500">9</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">10</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">11</div>
<!-- Week 3: May 12-18 -->
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">12</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">13</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">14</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">15</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">16</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">17</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">18</div>
<!-- Week 4: May 19-25 -->
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">19</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">20</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">21</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">22</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">23</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">24</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">25</div>
<!-- Week 5: May 26-31 -->
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">26</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">27</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">28</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">29</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">30</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">31</div>
<div class="text-center text-xs py-1.5 px-1 rounded-md"></div>
</div>
</div>
<!-- Today's summary -->
<div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<h3 class="font-semibold text-slate-900 mb-1">My Attendance — May 2026</h3>
<p class="text-xs text-slate-500 mb-4">Personal attendance summary</p>
<div class="grid grid-cols-2 gap-3 mb-4">
<div class="bg-emerald-50 rounded-lg p-3 text-center">
<p class="text-xl font-bold text-emerald-700">7</p>
<p class="text-xs text-emerald-600">Days Present</p>
</div>
<div class="bg-red-50 rounded-lg p-3 text-center">
<p class="text-xl font-bold text-red-600">0</p>
<p class="text-xs text-red-500">Days Absent</p>
</div>
<div class="bg-amber-50 rounded-lg p-3 text-center">
<p class="text-xl font-bold text-amber-700">1</p>
<p class="text-xs text-amber-600">Late Arrivals</p>
</div>
<div class="bg-blue-50 rounded-lg p-3 text-center">
<p class="text-xl font-bold text-blue-700">56.5</p>
<p class="text-xs text-blue-600">Hours Worked</p>
</div>
</div>
<div class="h-px bg-slate-100 mb-3"></div>
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Today</p>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span class="text-slate-500">Clock In</span>
<span class="font-semibold text-emerald-700">9:02 AM</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-500">Clock Out</span>
<span class="text-slate-400 italic">—</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-500">Hours So Far</span>
<span class="font-semibold text-slate-900">6h 38m</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-slate-500">Status</span>
<span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Late (2 min)</span>
</div>
</div>
</div>
</div>
<!-- Today's attendance table -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
<h3 class="font-semibold text-slate-900">Today's Attendance — May 9, 2026</h3>
<div class="flex items-center gap-2">
<select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
<option>All Departments</option>
<option>Engineering</option>
<option>Design</option>
</select>
</div>
</div>
<table class="w-full">
<thead>
<tr class="bg-slate-50 border-b border-slate-100">
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Department</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Clock In</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Clock Out</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Hours</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">James Liu</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">8:55 AM</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 45m</td>
<td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">Elena Vasquez</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
<td class="px-4 py-3.5 text-sm font-medium text-amber-600">9:18 AM</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 22m</td>
<td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Late</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">David Kim</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">8:58 AM</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 42m</td>
<td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">Michael Torres</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Sales</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5"><span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">On Leave</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">Rachel Park</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">9:01 AM</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 39m</td>
<td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=64" class="w-7 h-7 rounded-full" />
<span class="text-sm font-medium text-slate-900">Nathan Hughes</span>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Sales</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5 text-sm text-slate-400">—</td>
<td class="px-4 py-3.5"><span class="text-xs bg-red-50 text-red-600 px-2 py-0.5 rounded-full font-medium">Absent</span></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>
designs/07-payroll.html
+276
View File
@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Payroll</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 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 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="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>
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>
<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 payroll..." 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">Payroll Management</h1>
<p class="text-sm text-slate-500 mt-0.5">Process salaries, view payslips, and manage payroll runs</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 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
Payslips
</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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
Run New Payroll
</button>
</div>
</div>
<!-- Summary cards -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" 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>
</div>
<span class="text-xs font-medium text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">May 2026</span>
</div>
<p class="text-2xl font-bold text-slate-900">$284,500</p>
<p class="text-sm text-slate-500 mt-0.5">Total Monthly Cost</p>
<p class="text-xs text-emerald-600 font-medium mt-1.5">+2.1% from April</p>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
<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>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Current</span>
</div>
<p class="text-2xl font-bold text-slate-900">138</p>
<p class="text-sm text-slate-500 mt-0.5">Employees Paid</p>
<p class="text-xs text-slate-500 font-medium mt-1.5">of 142 total</p>
</div>
<div class="bg-white rounded-xl border border-amber-200 bg-amber-50/20 p-5 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
</div>
<span class="text-xs font-medium text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">Action needed</span>
</div>
<p class="text-2xl font-bold text-amber-700">4</p>
<p class="text-sm text-slate-500 mt-0.5">Pending Payslips</p>
<p class="text-xs text-amber-600 font-medium mt-1.5">Review before processing</p>
</div>
</div>
<!-- Payroll runs table -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
<h3 class="font-semibold text-slate-900">Payroll History</h3>
<button class="flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 px-3 py-1.5 border border-slate-200 rounded-lg 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
Filter
</button>
</div>
<table class="w-full">
<thead>
<tr class="bg-slate-50 border-b border-slate-100">
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Month</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Employees</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Gross</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Net</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Date Run</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-blue-600" 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-sm font-semibold text-slate-900">May 2026</p>
<p class="text-xs text-slate-400">Current</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">138</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$342,200</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$284,500</td>
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Draft</span></td>
<td class="px-4 py-4 text-sm text-slate-500">—</td>
<td class="px-4 py-4">
<button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg border border-blue-100 transition-colors">Process</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-slate-400" 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-sm font-semibold text-slate-900">April 2026</p>
<p class="text-xs text-slate-400">31 working days</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">140</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$338,800</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$278,600</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-4 text-sm text-slate-500">Apr 30, 2026</td>
<td class="px-4 py-4">
<div class="flex items-center gap-1.5">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-slate-400" 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>
<p class="text-sm font-semibold text-slate-900">March 2026</p>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">138</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$335,400</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$274,200</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-4 text-sm text-slate-500">Mar 31, 2026</td>
<td class="px-4 py-4">
<div class="flex items-center gap-1.5">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-slate-400" 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>
<p class="text-sm font-semibold text-slate-900">February 2026</p>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">136</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$329,800</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$270,400</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-4 text-sm text-slate-500">Feb 28, 2026</td>
<td class="px-4 py-4">
<div class="flex items-center gap-1.5">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-slate-400" 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>
<p class="text-sm font-semibold text-slate-900">January 2026</p>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">134</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$321,600</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$263,800</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-4 text-sm text-slate-500">Jan 31, 2026</td>
<td class="px-4 py-4">
<div class="flex items-center gap-1.5">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
</div>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-slate-400" 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>
<p class="text-sm font-semibold text-slate-900">December 2025</p>
</div>
</td>
<td class="px-4 py-4 text-sm text-slate-700">132</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$356,200</td>
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$291,400</td>
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-4 text-sm text-slate-500">Dec 31, 2025</td>
<td class="px-4 py-4">
<div class="flex items-center gap-1.5">
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>
designs/08-recruitment.html
+298
View File
@@ -0,0 +1,298 @@
<!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>
designs/09-recruitment-kanban.html
+381
View File
@@ -0,0 +1,381 @@
<!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>
designs/10-performance.html
+275
View File
@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Performance</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 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 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="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>
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..." 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-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-xl font-bold text-slate-900">Performance & Goals</h1>
<p class="text-sm text-slate-500 mt-0.5">Track team OKRs, individual goals, and performance reviews</p>
</div>
<div class="flex items-center gap-3">
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none bg-white">
<option>Q2 2026 (Apr–Jun)</option>
<option>Q1 2026 (Jan–Mar)</option>
</select>
<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 Goal
</button>
</div>
</div>
<!-- My Goals -->
<div>
<h2 class="text-base font-semibold text-slate-900 mb-3">My Goals — Q2 2026</h2>
<div class="grid grid-cols-3 gap-4">
<!-- Goal 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 mb-3">
<div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center">
<svg class="w-4.5 h-4.5 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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
</div>
<span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">In Progress</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm mb-1">Complete HRMS Module Rollout</h3>
<p class="text-xs text-slate-500 mb-4">Deploy all 8 modules of HRPanel v3 to production with full QA sign-off.</p>
<div class="mb-1 flex items-center justify-between">
<span class="text-xs text-slate-500">Progress</span>
<span class="text-xs font-bold text-slate-900">75%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2 mb-3">
<div class="bg-blue-500 h-2 rounded-full transition-all" style="width: 75%"></div>
</div>
<div class="flex items-center justify-between text-xs text-slate-400">
<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="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>
Due Jun 30, 2026
</span>
<span>Personal</span>
</div>
</div>
<!-- Goal 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 mb-3">
<div class="w-9 h-9 bg-emerald-50 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-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>
<span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">On Track</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm mb-1">Hire 10 Engineers in Q2</h3>
<p class="text-xs text-slate-500 mb-4">Close 10 open engineering positions to support the product roadmap.</p>
<div class="mb-1 flex items-center justify-between">
<span class="text-xs text-slate-500">Progress</span>
<span class="text-xs font-bold text-slate-900">6 / 10</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2 mb-3">
<div class="bg-emerald-500 h-2 rounded-full transition-all" style="width: 60%"></div>
</div>
<div class="flex items-center justify-between text-xs text-slate-400">
<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="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>
Due Jun 30, 2026
</span>
<span>Team OKR</span>
</div>
</div>
<!-- Goal 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 mb-3">
<div class="w-9 h-9 bg-amber-50 rounded-lg flex items-center justify-center">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
</div>
<span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Behind</span>
</div>
<h3 class="font-semibold text-slate-900 text-sm mb-1">Complete HR Certification</h3>
<p class="text-xs text-slate-500 mb-4">Obtain SHRM-SCP certification by end of Q2 to advance HR leadership skills.</p>
<div class="mb-1 flex items-center justify-between">
<span class="text-xs text-slate-500">Progress</span>
<span class="text-xs font-bold text-slate-900">30%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2 mb-3">
<div class="bg-amber-500 h-2 rounded-full transition-all" style="width: 30%"></div>
</div>
<div class="flex items-center justify-between text-xs text-slate-400">
<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="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>
Due May 31, 2026
</span>
<span>Personal</span>
</div>
</div>
</div>
</div>
<!-- Team Reviews -->
<div>
<div class="flex items-center justify-between mb-3">
<h2 class="text-base font-semibold text-slate-900">Team Performance Reviews — Q1 2026</h2>
<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">
Start New Review Cycle
</button>
</div>
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
<table class="w-full">
<thead>
<tr class="bg-slate-50 border-b border-slate-100">
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Department</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Last Review</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Rating</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">James Liu</p>
<p class="text-xs text-slate-500">Senior Engineer</p>
</div>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Mar 30, 2026</td>
<td class="px-4 py-3.5">
<div class="flex items-center gap-0.5">
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<span class="text-xs text-slate-500 ml-1">5.0</span>
</div>
</td>
<td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-3.5"><button class="text-xs font-medium text-blue-600 hover:text-blue-700">View Review</button></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Elena Vasquez</p>
<p class="text-xs text-slate-500">UX Designer</p>
</div>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Mar 28, 2026</td>
<td class="px-4 py-3.5">
<div class="flex items-center gap-0.5">
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-amber-400" 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>
<svg class="w-4 h-4 text-slate-200" 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>
<span class="text-xs text-slate-500 ml-1">4.0</span>
</div>
</td>
<td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Completed</span></td>
<td class="px-4 py-3.5"><button class="text-xs font-medium text-blue-600 hover:text-blue-700">View Review</button></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">David Kim</p>
<p class="text-xs text-slate-500">DevOps Engineer</p>
</div>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
<td class="px-4 py-3.5 text-sm text-slate-400">Not reviewed</td>
<td class="px-4 py-3.5 text-xs text-slate-400">—</td>
<td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-3.5"><button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg transition-colors">Start Review</button></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-5 py-3.5">
<div class="flex items-center gap-3">
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-8 h-8 rounded-full" />
<div>
<p class="text-sm font-medium text-slate-900">Rachel Park</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>
</td>
<td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
<td class="px-4 py-3.5 text-sm text-slate-400">Not reviewed</td>
<td class="px-4 py-3.5 text-xs text-slate-400">—</td>
<td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Pending</span></td>
<td class="px-4 py-3.5"><button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg transition-colors">Start Review</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/11-reports.html
+330
View File
@@ -0,0 +1,330 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Reports</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 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 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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
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 reports..." 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-6">
<div class="flex items-center justify-between">
<div>
<h1 class="text-xl font-bold text-slate-900">Reports &amp; Analytics</h1>
<p class="text-sm text-slate-500 mt-0.5">Workforce, leave, and payroll analytics at a glance</p>
</div>
<select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none bg-white">
<option>Last 12 months</option>
<option>Last 6 months</option>
<option>This year</option>
</select>
</div>
<!-- Section 1: Workforce Analytics -->
<div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="font-semibold text-slate-900 text-base">Workforce Analytics</h2>
<p class="text-xs text-slate-500 mt-0.5">Headcount, turnover, and department distribution</p>
</div>
<div class="flex items-center gap-2">
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export CSV
</button>
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
Export PDF
</button>
</div>
</div>
<div class="grid grid-cols-4 gap-4 mb-5">
<div class="bg-blue-50 rounded-lg p-3.5">
<p class="text-xl font-bold text-blue-700">142</p>
<p class="text-xs text-blue-600">Total Headcount</p>
<p class="text-xs text-slate-500 mt-0.5">+12 from last year</p>
</div>
<div class="bg-emerald-50 rounded-lg p-3.5">
<p class="text-xl font-bold text-emerald-700">4.2%</p>
<p class="text-xs text-emerald-600">Annual Turnover</p>
<p class="text-xs text-slate-500 mt-0.5">Industry avg: 12%</p>
</div>
<div class="bg-violet-50 rounded-lg p-3.5">
<p class="text-xl font-bold text-violet-700">8.3</p>
<p class="text-xs text-violet-600">Avg Tenure (yrs)</p>
<p class="text-xs text-slate-500 mt-0.5">+0.5 vs last year</p>
</div>
<div class="bg-amber-50 rounded-lg p-3.5">
<p class="text-xl font-bold text-amber-700">23</p>
<p class="text-xs text-amber-600">New Hires (YTD)</p>
<p class="text-xs text-slate-500 mt-0.5">Target: 30</p>
</div>
</div>
<!-- Headcount chart (bar) -->
<div>
<p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Monthly Headcount</p>
<div class="flex items-end justify-between gap-1.5 h-32">
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:90px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Jun</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:95px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Jul</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:98px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Aug</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:100px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Sep</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:104px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Oct</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:108px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Nov</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:110px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Dec</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:112px;background:#60A5FA;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Jan</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:116px;background:#60A5FA;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Feb</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:120px;background:#3B82F6;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Mar</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:124px;background:#3B82F6;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">Apr</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full rounded-t" style="height:128px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
<span class="text-xs text-slate-400">May</span>
</div>
</div>
</div>
</div>
<!-- Section 2: Leave Analytics -->
<div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="font-semibold text-slate-900 text-base">Leave Analytics</h2>
<p class="text-xs text-slate-500 mt-0.5">Leave utilization, types, and approval rates</p>
</div>
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export Report
</button>
</div>
<div class="grid grid-cols-2 gap-6">
<div>
<p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Leave by Type (YTD)</p>
<!-- Horizontal bar chart -->
<div class="space-y-3">
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Annual Leave</span>
<span class="font-medium text-slate-900">148 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Sick Leave</span>
<span class="font-medium text-slate-900">64 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-rose-400 h-2 rounded-full" style="width: 35%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Personal Leave</span>
<span class="font-medium text-slate-900">31 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-violet-400 h-2 rounded-full" style="width: 17%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Maternity/Paternity</span>
<span class="font-medium text-slate-900">90 days</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div class="bg-pink-400 h-2 rounded-full" style="width: 49%"></div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 content-start">
<div class="bg-blue-50 rounded-xl p-4">
<p class="text-xl font-bold text-blue-700">94%</p>
<p class="text-xs text-blue-600 mt-0.5">Approval Rate</p>
</div>
<div class="bg-emerald-50 rounded-xl p-4">
<p class="text-xl font-bold text-emerald-700">2.3</p>
<p class="text-xs text-emerald-600 mt-0.5">Avg Days per Request</p>
</div>
<div class="bg-amber-50 rounded-xl p-4">
<p class="text-xl font-bold text-amber-700">3.4h</p>
<p class="text-xs text-amber-600 mt-0.5">Avg Approval Time</p>
</div>
<div class="bg-slate-50 rounded-xl p-4">
<p class="text-xl font-bold text-slate-700">333</p>
<p class="text-xs text-slate-600 mt-0.5">Total Days Taken</p>
</div>
</div>
</div>
</div>
<!-- Section 3: Payroll Analytics -->
<div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-5">
<div>
<h2 class="font-semibold text-slate-900 text-base">Payroll Analytics</h2>
<p class="text-xs text-slate-500 mt-0.5">Monthly salary trends and cost distribution by department</p>
</div>
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Export Report
</button>
</div>
<div class="grid grid-cols-3 gap-4 mb-5">
<div class="bg-emerald-50 rounded-xl p-4">
<p class="text-xl font-bold text-emerald-700">$284.5K</p>
<p class="text-xs text-emerald-600 mt-0.5">May 2026 Net</p>
<p class="text-xs text-slate-500 mt-1">+2.1% MoM</p>
</div>
<div class="bg-blue-50 rounded-xl p-4">
<p class="text-xl font-bold text-blue-700">$342.2K</p>
<p class="text-xs text-blue-600 mt-0.5">May 2026 Gross</p>
<p class="text-xs text-slate-500 mt-1">Includes benefits</p>
</div>
<div class="bg-violet-50 rounded-xl p-4">
<p class="text-xl font-bold text-violet-700">$2,003</p>
<p class="text-xs text-violet-600 mt-0.5">Avg Net Salary</p>
<p class="text-xs text-slate-500 mt-1">Per employee</p>
</div>
</div>
<!-- Payroll cost by dept (horizontal bars) -->
<p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Payroll Cost by Department</p>
<div class="space-y-3">
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Engineering</span>
<span class="font-semibold text-slate-900">$142,300 <span class="text-slate-400 font-normal">(50%)</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2.5">
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Sales</span>
<span class="font-semibold text-slate-900">$56,900 <span class="text-slate-400 font-normal">(20%)</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2.5">
<div class="bg-emerald-500 h-2.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-600">Product &amp; Design</span>
<span class="font-semibold text-slate-900">$42,675 <span class="text-slate-400 font-normal">(15%)</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2.5">
<div class="bg-violet-500 h-2.5 rounded-full" style="width: 15%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Operations &amp; HR</span>
<span class="font-semibold text-slate-900">$28,450 <span class="text-slate-400 font-normal">(10%)</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2.5">
<div class="bg-amber-500 h-2.5 rounded-full" style="width: 10%"></div>
</div>
</div>
<div>
<div class="flex items-center justify-between text-xs mb-1">
<span class="text-slate-600">Finance &amp; Marketing</span>
<span class="font-semibold text-slate-900">$14,175 <span class="text-slate-400 font-normal">(5%)</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2.5">
<div class="bg-rose-400 h-2.5 rounded-full" style="width: 5%"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/12-settings.html
+221
View File
@@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Settings</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 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 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
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">
<h1 class="text-base font-semibold text-slate-900">Settings</h1>
<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">
<div class="flex gap-6 max-w-5xl">
<!-- Settings sidebar nav -->
<div class="w-52 flex-shrink-0">
<nav class="space-y-0.5">
<a href="#" 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-4 h-4" 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>
Company Profile
</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">
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
Work Schedule
</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">
<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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
Holiday Calendar
</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">
<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 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
Leave Types
</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">
<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="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>
Notifications
</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">
<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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
Roles &amp; Permissions
</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">
<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="M4 6h16M4 12h16M4 18h7" /></svg>
Integrations
</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">
<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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
Billing
</a>
</nav>
</div>
<!-- Settings content -->
<div class="flex-1">
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-100">
<h2 class="font-semibold text-slate-900 text-base">Company Profile</h2>
<p class="text-xs text-slate-500 mt-0.5">Manage your organization's core information</p>
</div>
<div class="p-6 space-y-6">
<!-- Logo upload -->
<div>
<label class="block text-sm font-medium text-slate-700 mb-2">Company Logo</label>
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center">
<svg class="w-8 h-8 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>
<div>
<div class="flex items-center gap-2">
<button class="text-sm font-medium text-blue-600 hover:text-blue-700 px-3 py-1.5 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
Upload Logo
</button>
<button class="text-sm font-medium text-slate-500 hover:text-slate-700 px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
Remove
</button>
</div>
<p class="text-xs text-slate-400 mt-1.5">PNG, JPG up to 2MB. Recommended: 256×256px.</p>
</div>
</div>
</div>
<div class="h-px bg-slate-100"></div>
<!-- Form fields -->
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Company Name</label>
<input type="text" value="HRPanel Technologies Inc." class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Industry</label>
<select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option selected>Technology / Software</option>
<option>Healthcare</option>
<option>Finance</option>
<option>Retail</option>
<option>Manufacturing</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Company Size</label>
<select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>1–50</option>
<option selected>51–200</option>
<option>201–500</option>
<option>500+</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Time Zone</label>
<select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option selected>America/Los_Angeles (UTC-7)</option>
<option>America/New_York (UTC-4)</option>
<option>Europe/London (UTC+1)</option>
<option>Asia/Kolkata (UTC+5:30)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Currency</label>
<select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option selected>USD — US Dollar ($)</option>
<option>EUR — Euro (€)</option>
<option>GBP — British Pound (£)</option>
<option>INR — Indian Rupee (₹)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Fiscal Year Start</label>
<select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option selected>January</option>
<option>April</option>
<option>July</option>
<option>October</option>
</select>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium text-slate-700 mb-1.5">Registered Address</label>
<input type="text" value="1 Infinite Loop, Cupertino, CA 95014, United States" class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Work Email Domain</label>
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">@</span>
<input type="text" value="hrpanel.com" class="w-full pl-7 pr-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 mb-1.5">Support Email</label>
<input type="email" value="hr@hrpanel.com" class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
</div>
</div>
<div class="h-px bg-slate-100"></div>
<div class="flex items-center justify-between">
<p class="text-xs text-slate-500">Last updated: May 1, 2026 by Sarah Chen</p>
<div class="flex items-center gap-3">
<button class="px-4 py-2 text-sm font-medium text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
Cancel
</button>
<button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors">
Save Changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
designs/index.html
+655
View File
@@ -0,0 +1,655 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HRPanel v3 — Design Gallery</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; }
.page-card:hover .page-arrow { opacity: 1; transform: translateX(0); }
.page-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
</style>
</head>
<body class="bg-slate-50 min-h-screen">
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-10">
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center gap-3">
<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>
<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 ml-1.5">v3</span>
</div>
</div>
<div class="flex items-center gap-3">
<span class="text-sm text-slate-500">Design Mockups</span>
<span class="w-1 h-1 rounded-full bg-slate-300"></span>
<span class="text-sm font-medium text-slate-700">13 screens</span>
</div>
</div>
</header>
<!-- Hero -->
<div class="bg-white border-b border-slate-200">
<div class="max-w-6xl mx-auto px-6 py-12">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-3">
<span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full uppercase tracking-wide">Design Review</span>
</div>
<h1 class="text-3xl font-bold text-slate-900 mb-2">HRPanel v3 — Design Mockups</h1>
<p class="text-slate-500 text-base max-w-xl">
Full HRMS design system with 13 polished screens. Clean all-light theme inspired by BambooHR and Rippling. Click any card to preview the mockup.
</p>
</div>
<div class="hidden md:flex items-center gap-3">
<div class="text-center">
<p class="text-2xl font-bold text-slate-900">13</p>
<p class="text-xs text-slate-500">Screens</p>
</div>
<div class="w-px h-8 bg-slate-200"></div>
<div class="text-center">
<p class="text-2xl font-bold text-slate-900">9</p>
<p class="text-xs text-slate-500">Modules</p>
</div>
<div class="w-px h-8 bg-slate-200"></div>
<div class="text-center">
<p class="text-2xl font-bold text-blue-600">100%</p>
<p class="text-xs text-slate-500">Responsive</p>
</div>
</div>
</div>
<!-- Design system preview -->
<div class="mt-8 flex items-center gap-6">
<div class="flex items-center gap-2">
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Colors</span>
<div class="flex gap-1.5">
<div class="w-5 h-5 rounded-md bg-blue-600" title="Primary"></div>
<div class="w-5 h-5 rounded-md bg-blue-100" title="Primary Light"></div>
<div class="w-5 h-5 rounded-md bg-emerald-500" title="Success"></div>
<div class="w-5 h-5 rounded-md bg-amber-500" title="Warning"></div>
<div class="w-5 h-5 rounded-md bg-red-500" title="Danger"></div>
<div class="w-5 h-5 rounded-md bg-slate-900" title="Text Primary"></div>
<div class="w-5 h-5 rounded-md bg-slate-400" title="Text Secondary"></div>
<div class="w-5 h-5 rounded-md bg-slate-100 border border-slate-200" title="Surface"></div>
</div>
</div>
<div class="w-px h-4 bg-slate-200"></div>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Font</span>
<span class="text-sm font-medium text-slate-900">Inter</span>
</div>
<div class="w-px h-4 bg-slate-200"></div>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Framework</span>
<span class="text-sm font-medium text-slate-900">Tailwind CSS</span>
</div>
</div>
</div>
</div>
<!-- Gallery grid -->
<div class="max-w-6xl mx-auto px-6 py-10">
<div class="grid grid-cols-3 gap-5">
<!-- 01 Login -->
<a href="01-login.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-gradient-to-br from-blue-600 to-blue-700 relative overflow-hidden flex items-center justify-center">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="bg-white/90 backdrop-blur rounded-xl p-4 shadow-lg w-32">
<div class="w-6 h-1.5 bg-blue-600 rounded mb-2"></div>
<div class="w-full h-2 bg-slate-200 rounded mb-1.5"></div>
<div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
<div class="w-full h-5 bg-blue-600 rounded"></div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">01</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Login</h3>
</div>
<p class="text-xs text-slate-500">Split-panel auth screen with brand identity</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Auth</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">No sidebar</span>
</div>
</div>
</a>
<!-- 02 Dashboard -->
<a href="02-dashboard.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden flex items-end justify-center p-3 gap-1.5">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-1.5 items-end">
<div class="w-8 h-14 bg-blue-200 rounded-t-md"></div>
<div class="w-8 h-10 bg-blue-400 rounded-t-md"></div>
<div class="w-8 h-16 bg-blue-600 rounded-t-md"></div>
<div class="w-8 h-12 bg-blue-300 rounded-t-md"></div>
<div class="flex flex-col gap-1 ml-3">
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">02</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Dashboard</h3>
</div>
<p class="text-xs text-slate-500">KPIs, attendance chart, leave requests, quick actions</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full font-medium">Active</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
</div>
</div>
</a>
<!-- 03 Employees -->
<a href="03-employees.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex gap-2 flex-wrap">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-2 flex-wrap content-start">
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
<div class="w-7 h-7 rounded-full bg-blue-400"></div>
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
<div class="w-9 h-1 bg-slate-100 rounded"></div>
</div>
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
<div class="w-7 h-7 rounded-full bg-violet-400"></div>
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
<div class="w-9 h-1 bg-slate-100 rounded"></div>
</div>
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
<div class="w-7 h-7 rounded-full bg-emerald-400"></div>
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
<div class="w-9 h-1 bg-slate-100 rounded"></div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">03</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Directory</h3>
</div>
<p class="text-xs text-slate-500">Card grid with filters, search, and status badges</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Card Grid</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pagination</span>
</div>
</div>
</a>
<!-- 04 Employee Profile -->
<a href="04-employee-profile.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-3">
<div class="w-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
<div class="w-8 h-8 rounded-full bg-blue-500"></div>
<div class="w-12 h-1.5 bg-slate-200 rounded mt-1"></div>
<div class="w-9 h-1 bg-slate-100 rounded"></div>
<div class="w-full h-4 bg-emerald-100 rounded mt-1"></div>
</div>
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
<div class="flex gap-1.5 mb-2 border-b border-slate-100 pb-1.5">
<div class="w-10 h-2.5 bg-blue-600 rounded"></div>
<div class="w-8 h-2.5 bg-slate-100 rounded"></div>
<div class="w-10 h-2.5 bg-slate-100 rounded"></div>
</div>
<div class="space-y-1">
<div class="w-full h-2 bg-slate-100 rounded"></div>
<div class="w-full h-2 bg-slate-100 rounded"></div>
<div class="w-3/4 h-2 bg-slate-100 rounded"></div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">04</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Profile</h3>
</div>
<p class="text-xs text-slate-500">Tabbed profile with personal, job, and payroll info</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Tabs</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Detail View</span>
</div>
</div>
</a>
<!-- 05 Leave Management -->
<a href="05-leave-management.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16">
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<div class="flex gap-2 px-3 py-2 border-b border-slate-100">
<div class="w-8 h-2 bg-blue-600 rounded"></div>
<div class="w-8 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-slate-100 rounded"></div>
</div>
<div class="px-3 py-1.5 space-y-1.5">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-violet-300 flex-shrink-0"></div>
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-amber-100 rounded"></div>
<div class="flex gap-1">
<div class="w-5 h-3 bg-emerald-100 rounded"></div>
<div class="w-5 h-3 bg-red-100 rounded"></div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-emerald-300 flex-shrink-0"></div>
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-emerald-100 rounded"></div>
<div class="w-10 h-3 bg-slate-100 rounded"></div>
</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-blue-300 flex-shrink-0"></div>
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-red-100 rounded"></div>
<div class="w-10 h-3 bg-slate-100 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">05</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Leave Management</h3>
</div>
<p class="text-xs text-slate-500">Admin view of leave requests with approve/reject</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Table</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Filters</span>
</div>
</div>
</a>
<!-- 06 Attendance -->
<a href="06-attendance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16">
<div class="bg-white rounded-xl border border-slate-200 p-2">
<div class="grid grid-cols-7 gap-0.5">
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-emerald-200 rounded-sm"></div>
<div class="h-4 bg-emerald-200 rounded-sm"></div>
<div class="h-4 bg-red-200 rounded-sm"></div>
<div class="h-4 bg-amber-200 rounded-sm"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-emerald-300 rounded-sm"></div>
<div class="h-4 bg-emerald-300 rounded-sm"></div>
<div class="h-4 bg-emerald-300 rounded-sm"></div>
<div class="h-4 bg-emerald-300 rounded-sm"></div>
<div class="h-4 bg-blue-400 rounded-sm ring-2 ring-blue-500"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-blue-200 rounded-sm"></div>
<div class="h-4 bg-blue-200 rounded-sm"></div>
<div class="h-4 bg-blue-200 rounded-sm"></div>
<div class="h-4 bg-slate-50 rounded-sm"></div>
<div class="h-4 bg-slate-50 rounded-sm"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
<div class="h-4 bg-slate-100 rounded-sm"></div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">06</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Attendance</h3>
</div>
<p class="text-xs text-slate-500">Monthly calendar view with color-coded statuses</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Calendar</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Clock In/Out</span>
</div>
</div>
</a>
<!-- 07 Payroll -->
<a href="07-payroll.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex items-center justify-center">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 w-full">
<div class="flex gap-2 mb-2">
<div class="flex-1 h-10 bg-emerald-100 rounded-lg border border-emerald-200 flex items-center justify-center">
<div class="w-8 h-2 bg-emerald-400 rounded"></div>
</div>
<div class="flex-1 h-10 bg-blue-100 rounded-lg border border-blue-200 flex items-center justify-center">
<div class="w-8 h-2 bg-blue-400 rounded"></div>
</div>
<div class="flex-1 h-10 bg-amber-100 rounded-lg border border-amber-200 flex items-center justify-center">
<div class="w-8 h-2 bg-amber-400 rounded"></div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 px-2 py-1.5 space-y-1">
<div class="flex gap-2">
<div class="w-8 h-2 bg-slate-200 rounded"></div>
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-emerald-200 rounded"></div>
</div>
<div class="flex gap-2">
<div class="w-8 h-2 bg-slate-200 rounded"></div>
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
<div class="w-8 h-2 bg-emerald-200 rounded"></div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">07</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Payroll</h3>
</div>
<p class="text-xs text-slate-500">Payroll runs history, summaries, and processing</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">History</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Payslips</span>
</div>
</div>
</a>
<!-- 08 Recruitment -->
<a href="08-recruitment.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 space-y-2">
<div class="bg-white rounded-xl border border-slate-200 p-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<div class="w-5 h-5 rounded-lg bg-violet-100"></div>
<div>
<div class="w-20 h-2 bg-slate-200 rounded mb-1"></div>
<div class="w-12 h-1.5 bg-slate-100 rounded"></div>
</div>
</div>
<div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
</div>
</div>
<div class="bg-white rounded-xl border border-slate-200 p-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<div class="w-5 h-5 rounded-lg bg-blue-100"></div>
<div>
<div class="w-16 h-2 bg-slate-200 rounded mb-1"></div>
<div class="w-10 h-1.5 bg-slate-100 rounded"></div>
</div>
</div>
<div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">08</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Recruitment</h3>
</div>
<p class="text-xs text-slate-500">Job postings with pipeline progress indicators</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Job Cards</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pipeline</span>
</div>
</div>
</a>
<!-- 09 Kanban -->
<a href="09-recruitment-kanban.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-1.5">
<div class="flex-1 space-y-1">
<div class="h-2 bg-slate-300 rounded-sm"></div>
<div class="h-12 bg-white rounded-lg border border-slate-200 p-1">
<div class="flex items-center gap-1 mb-1">
<div class="w-3 h-3 rounded-full bg-blue-300"></div>
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
</div>
<div class="w-full h-1 bg-slate-100 rounded"></div>
</div>
</div>
<div class="flex-1 space-y-1">
<div class="h-2 bg-blue-200 rounded-sm"></div>
<div class="h-12 bg-white rounded-lg border border-blue-200 p-1">
<div class="flex items-center gap-1 mb-1">
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
</div>
</div>
</div>
<div class="flex-1 space-y-1">
<div class="h-2 bg-violet-200 rounded-sm"></div>
<div class="h-12 bg-white rounded-lg border border-violet-200 p-1">
<div class="flex items-center gap-1 mb-1">
<div class="w-3 h-3 rounded-full bg-violet-500"></div>
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
</div>
</div>
</div>
<div class="flex-1 space-y-1">
<div class="h-2 bg-emerald-200 rounded-sm"></div>
<div class="h-12 bg-white rounded-lg border border-emerald-200 p-1">
<div class="flex items-center gap-1 mb-1">
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
<div class="w-6 h-1.5 bg-slate-200 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">09</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Applicant Kanban</h3>
</div>
<p class="text-xs text-slate-500">5-stage hiring pipeline kanban board</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Kanban</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Drag & Drop</span>
</div>
</div>
</a>
<!-- 10 Performance -->
<a href="10-performance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-2">
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
<div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-blue-500" style="width:75%"></div></div>
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-emerald-500" style="width:60%"></div></div>
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-2"><div class="h-1.5 rounded-full bg-amber-500" style="width:30%"></div></div>
<div class="w-8 h-2 bg-blue-100 rounded"></div>
</div>
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
<div class="space-y-1.5">
<div class="flex items-center gap-1">
<div class="w-4 h-4 rounded-full bg-violet-200"></div>
<div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
<div class="flex gap-0.5">
<div class="w-2 h-2 text-amber-400">★</div>
<div class="w-2 h-2 text-amber-400">★</div>
<div class="w-2 h-2 text-amber-400">★</div>
</div>
</div>
<div class="flex items-center gap-1">
<div class="w-4 h-4 rounded-full bg-pink-200"></div>
<div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">10</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Performance</h3>
</div>
<p class="text-xs text-slate-500">OKR goals with progress bars and team reviews</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Goals</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Reviews</span>
</div>
</div>
</a>
<!-- 11 Reports -->
<a href="11-reports.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16">
<div class="bg-white rounded-xl border border-slate-200 p-2">
<div class="flex items-end gap-1 h-16">
<div class="flex-1 bg-blue-200 rounded-t" style="height:50%"></div>
<div class="flex-1 bg-blue-300 rounded-t" style="height:60%"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height:75%"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height:65%"></div>
<div class="flex-1 bg-blue-600 rounded-t" style="height:90%"></div>
<div class="flex-1 bg-blue-700 rounded-t" style="height:80%"></div>
<div class="flex-col justify-end ml-1 space-y-1">
<div class="w-12 h-1.5 bg-blue-100 rounded"></div>
<div class="w-10 h-1.5 bg-emerald-100 rounded"></div>
<div class="w-8 h-1.5 bg-violet-100 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">11</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Reports</h3>
</div>
<p class="text-xs text-slate-500">Workforce, leave, and payroll analytics dashboards</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Charts</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
</div>
</div>
</a>
<!-- 12 Settings -->
<a href="12-settings.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
<div class="ml-16 flex gap-2">
<div class="w-24 bg-white rounded-xl border border-slate-200 p-2 space-y-1">
<div class="w-full h-2 bg-blue-200 rounded"></div>
<div class="w-full h-2 bg-slate-100 rounded"></div>
<div class="w-full h-2 bg-slate-100 rounded"></div>
<div class="w-full h-2 bg-slate-100 rounded"></div>
</div>
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2 space-y-1.5">
<div class="w-full h-8 bg-slate-50 border border-slate-200 rounded-lg p-1.5">
<div class="flex items-center gap-1">
<div class="w-5 h-5 bg-blue-600 rounded-md flex-shrink-0"></div>
<div class="w-12 h-2 bg-slate-200 rounded"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-1">
<div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
<div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-semibold text-slate-400">12</span>
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Settings</h3>
</div>
<p class="text-xs text-slate-500">Company profile, work schedule, and system config</p>
</div>
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
</div>
<div class="flex flex-wrap gap-1 mt-3">
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Forms</span>
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Config</span>
</div>
</div>
</a>
</div>
</div>
<!-- Footer -->
<footer class="max-w-6xl mx-auto px-6 pb-10 mt-4">
<div class="border-t border-slate-200 pt-6 flex items-center justify-between">
<p class="text-xs text-slate-400">HRPanel v3 Design System — Built with Tailwind CSS + Inter</p>
<p class="text-xs text-slate-400">13 screens · 9 modules · BambooHR-inspired clean theme</p>
</div>
</footer>
</body>
</html>