TenX PM
340 lines
24 KiB
HTML
340 lines
24 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 — Leave Management</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>body { font-family: 'Inter', sans-serif; }</style>
|
||
</head>
|
||
<body class="bg-slate-50 min-h-screen">
|
||
<div class="flex h-screen overflow-hidden">
|
||
<!-- Sidebar -->
|
||
<aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
|
||
<div class="h-16 flex items-center px-5 border-b border-slate-100">
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||
</div>
|
||
<span class="font-bold text-slate-900 text-base">HRPanel</span>
|
||
<span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
|
||
</div>
|
||
</div>
|
||
<nav class="flex-1 px-3 py-4 space-y-0.5">
|
||
<a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
|
||
<a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
|
||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
|
||
<a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||
Leave
|
||
</a>
|
||
<a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
|
||
<a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
|
||
<a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
|
||
<a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
|
||
<a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
|
||
<div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
|
||
<a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
|
||
</nav>
|
||
<div class="px-3 py-4 border-t border-slate-100">
|
||
<div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
|
||
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
|
||
<p class="text-xs text-slate-500 truncate">HR Administrator</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="flex-1 flex flex-col overflow-hidden">
|
||
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
|
||
<div class="relative">
|
||
<svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
||
<input type="text" placeholder="Search employees..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
||
<span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
|
||
</button>
|
||
<div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
|
||
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
|
||
<span class="text-sm font-medium text-slate-900">Sarah Chen</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="flex-1 overflow-y-auto p-6">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h1 class="text-xl font-bold text-slate-900">Leave Management</h1>
|
||
<p class="text-sm text-slate-500 mt-0.5">Review and manage employee leave requests</p>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
|
||
Export
|
||
</button>
|
||
<button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
|
||
New Leave Request
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats row -->
|
||
<div class="grid grid-cols-4 gap-4 mb-5">
|
||
<div class="bg-white rounded-xl border border-slate-200 p-4">
|
||
<p class="text-2xl font-bold text-slate-900">23</p>
|
||
<p class="text-sm text-slate-500 mt-0.5">Total This Month</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl border border-amber-200 p-4 bg-amber-50/30">
|
||
<p class="text-2xl font-bold text-amber-600">5</p>
|
||
<p class="text-sm text-slate-500 mt-0.5">Pending Review</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl border border-emerald-200 p-4 bg-emerald-50/30">
|
||
<p class="text-2xl font-bold text-emerald-600">16</p>
|
||
<p class="text-sm text-slate-500 mt-0.5">Approved</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl border border-red-200 p-4 bg-red-50/30">
|
||
<p class="text-2xl font-bold text-red-500">2</p>
|
||
<p class="text-sm text-slate-500 mt-0.5">Rejected</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filter tabs + table -->
|
||
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<!-- Tabs -->
|
||
<div class="flex items-center border-b border-slate-200 px-5 gap-1">
|
||
<button class="px-4 py-3.5 text-sm font-semibold text-blue-600 border-b-2 border-blue-600">All Requests</button>
|
||
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
|
||
Pending
|
||
<span class="bg-amber-100 text-amber-700 text-xs font-bold px-1.5 py-0.5 rounded-full">5</span>
|
||
</button>
|
||
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Approved</button>
|
||
<button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Rejected</button>
|
||
<div class="flex-1"></div>
|
||
<div class="flex items-center gap-2 py-2">
|
||
<select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
|
||
<option>All Leave Types</option>
|
||
<option>Annual Leave</option>
|
||
<option>Sick Leave</option>
|
||
<option>Personal Leave</option>
|
||
<option>Maternity Leave</option>
|
||
</select>
|
||
<select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
|
||
<option>May 2026</option>
|
||
<option>April 2026</option>
|
||
<option>March 2026</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<table class="w-full">
|
||
<thead>
|
||
<tr class="bg-slate-50 border-b border-slate-200">
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Leave Type</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Duration</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Days</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Reason</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
|
||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">James Liu</p>
|
||
<p class="text-xs text-slate-500">Engineering</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 12 – May 14</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Family vacation planned since...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
|
||
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Priya Sharma</p>
|
||
<p class="text-xs text-slate-500">Product</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 15</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Not feeling well, fever since...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
|
||
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Michael Torres</p>
|
||
<p class="text-xs text-slate-500">Sales</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 18 – May 22</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">5</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Annual family holiday trip to...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
|
||
<td class="px-4 py-4">
|
||
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Elena Vasquez</p>
|
||
<p class="text-xs text-slate-500">Design</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-violet-50 text-violet-700 px-2.5 py-1 rounded-full font-medium">Personal Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 20</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Personal appointment at...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
|
||
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">David Kim</p>
|
||
<p class="text-xs text-slate-500">Engineering</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 23 – May 25</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Long weekend trip, all tasks...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
|
||
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=0F766E&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Aisha Patel</p>
|
||
<p class="text-xs text-slate-500">Finance</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-pink-50 text-pink-700 px-2.5 py-1 rounded-full font-medium">Maternity Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">Jun 1 – Aug 30</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">65</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Maternity leave as per policy</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
|
||
<td class="px-4 py-4">
|
||
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Nathan Hughes</p>
|
||
<p class="text-xs text-slate-500">Sales</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 7 – May 8</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">2</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Flu, doctor prescribed rest...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-red-50 text-red-600 px-2.5 py-1 rounded-full font-medium border border-red-100">Rejected</span></td>
|
||
<td class="px-4 py-4">
|
||
<button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50 transition-colors">
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-8 h-8 rounded-full" />
|
||
<div>
|
||
<p class="text-sm font-medium text-slate-900">Rachel Park</p>
|
||
<p class="text-xs text-slate-500">Design</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
|
||
<td class="px-4 py-4 text-sm text-slate-700">May 28 – May 30</td>
|
||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
|
||
<td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Attending a design conference...</td>
|
||
<td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
|
||
<td class="px-4 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
|
||
<button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Table footer -->
|
||
<div class="px-5 py-3.5 border-t border-slate-100 flex items-center justify-between">
|
||
<p class="text-sm text-slate-500">Showing 1–8 of 23 requests</p>
|
||
<div class="flex items-center gap-1">
|
||
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled>
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
|
||
</button>
|
||
<button class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-semibold">1</button>
|
||
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">2</button>
|
||
<button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">3</button>
|
||
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|