TenX PM
372 lines
27 KiB
HTML
372 lines
27 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 — 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>
|