deploy: hr-panel-v3-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,276 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HRPanel v3 — Payroll</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 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 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 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">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 payroll..." 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-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-slate-900">Payroll Management</h1>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Process salaries, view payslips, and manage payroll runs</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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
|
||||
Payslips
|
||||
</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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
Run New Payroll
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary cards -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<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-10 h-10 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="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>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">May 2026</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-slate-900">$284,500</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Total Monthly Cost</p>
|
||||
<p class="text-xs text-emerald-600 font-medium mt-1.5">+2.1% from April</p>
|
||||
</div>
|
||||
<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-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
|
||||
<svg class="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="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 font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Current</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-slate-900">138</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Employees Paid</p>
|
||||
<p class="text-xs text-slate-500 font-medium mt-1.5">of 142 total</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-amber-200 bg-amber-50/20 p-5 hover:shadow-md transition-shadow">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="w-10 h-10 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="M9 12h6m-6 4h6m2 5H7a2 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>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">Action needed</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-amber-700">4</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Pending Payslips</p>
|
||||
<p class="text-xs text-amber-600 font-medium mt-1.5">Review before processing</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payroll runs 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">Payroll History</h3>
|
||||
<button class="flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 px-3 py-1.5 border border-slate-200 rounded-lg 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
|
||||
Filter
|
||||
</button>
|
||||
</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">Month</th>
|
||||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Employees</th>
|
||||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Gross</th>
|
||||
<th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Net</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">Date Run</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-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">May 2026</p>
|
||||
<p class="text-xs text-slate-400">Current</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">138</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$342,200</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$284,500</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">Draft</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">—</td>
|
||||
<td class="px-4 py-4">
|
||||
<button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg border border-blue-100 transition-colors">Process</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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 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>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-900">April 2026</p>
|
||||
<p class="text-xs text-slate-400">31 working days</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">140</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$338,800</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$278,600</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">Completed</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">Apr 30, 2026</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<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>
|
||||
<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">Export</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">
|
||||
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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 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>
|
||||
<p class="text-sm font-semibold text-slate-900">March 2026</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">138</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$335,400</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$274,200</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">Completed</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">Mar 31, 2026</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<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>
|
||||
<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">Export</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">
|
||||
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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 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>
|
||||
<p class="text-sm font-semibold text-slate-900">February 2026</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">136</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$329,800</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$270,400</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">Completed</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">Feb 28, 2026</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<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>
|
||||
<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">Export</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">
|
||||
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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 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>
|
||||
<p class="text-sm font-semibold text-slate-900">January 2026</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">134</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$321,600</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$263,800</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">Completed</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">Jan 31, 2026</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<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>
|
||||
<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">Export</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">
|
||||
<div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<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 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>
|
||||
<p class="text-sm font-semibold text-slate-900">December 2025</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-slate-700">132</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$356,200</td>
|
||||
<td class="px-4 py-4 text-sm font-semibold text-slate-900">$291,400</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">Completed</span></td>
|
||||
<td class="px-4 py-4 text-sm text-slate-500">Dec 31, 2025</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<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>
|
||||
<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">Export</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user