TenX PM
423 lines
37 KiB
HTML
423 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>HRPanel v3 — 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>
|