deploy: hr-panel-v3-designs
This commit is contained in:
TenX PM
@@ -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 & 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 & 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 & 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 & 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>
|
||||
Reference in New Issue
Block a user