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/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>