580 lines
64 KiB
HTML
580 lines
64 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EDK - Data Tables 1</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
<script src="js/sidebar1.js"></script>
|
|
<script src="js/topbar1.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style1.css">
|
|
</head>
|
|
<body>
|
|
<div x-data="{ side: true, isMobile: false, aktif: 'datatables' }" x-init="isMobile = window.innerWidth <= 768; if(isMobile){ side = false } window.addEventListener('resize', function(){ isMobile = window.innerWidth <= 768; if(isMobile){ side = false } else { side = true } })">
|
|
<div x-show="side && isMobile" x-on:click="side = false" class="fixed inset-0 bg-black/60 z-40 md:hidden"></div>
|
|
<crm-sidebar-1></crm-sidebar-1>
|
|
<main id="main" x-bind:class="{ 'shift': side }">
|
|
<crm-topbar-1></crm-topbar-1>
|
|
<div class="p-4 md:p-6 space-y-6">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
|
<div class="flex items-center gap-2">
|
|
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
|
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
|
<div class="p-5 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
|
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
|
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">User login successful</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
|
</tr>
|
|
<tr class="bg-gray-50/60">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@company.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td>
|
|
</tr>
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@partner.org</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td>
|
|
</tr>
|
|
<tr class="bg-gray-50/60">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">system@crmpro.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td>
|
|
</tr>
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@enterprise.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td>
|
|
</tr>
|
|
<tr class="bg-gray-50/60">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@crmpro.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td>
|
|
</tr>
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@partner.org</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td>
|
|
</tr>
|
|
<tr class="bg-gray-50/60">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@crmpro.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
|
</tr>
|
|
<tr class="bg-white">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@company.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td>
|
|
</tr>
|
|
<tr class="bg-gray-50/60">
|
|
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@enterprise.com</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
|
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
|
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
|
<div class="p-5 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
|
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
|
<div class="relative flex-1 w-full sm:max-w-xs">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
|
</div>
|
|
<div class="flex items-center gap-2 w-full sm:w-auto">
|
|
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
|
<option value="">All Categories</option>
|
|
<option>Electronics</option>
|
|
<option>Office Supplies</option>
|
|
<option>Furniture</option>
|
|
<option>Software</option>
|
|
<option>Services</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
|
<div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
|
</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
|
<div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
|
</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
|
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
|
<div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
|
</th>
|
|
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
|
<div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="product-tbody">
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td>
|
|
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">342</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td>
|
|
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">128</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td>
|
|
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">999</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td>
|
|
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td>
|
|
<td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">—</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td>
|
|
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">89</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td>
|
|
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">56</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td>
|
|
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">500</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/60 transition">
|
|
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td>
|
|
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
|
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
|
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
|
<div class="p-5 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
|
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
|
</div>
|
|
</div>
|
|
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
|
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
|
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print Selected</button>
|
|
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Change Status</button>
|
|
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete Selected</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse" id="invoice-table">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="w-12 px-4 py-3.5 border-b border-gray-100">
|
|
<input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
|
|
</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Invoice No.</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
|
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
|
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td>
|
|
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
|
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
|
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
|
<div class="p-5 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
|
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse" id="employee-table">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
|
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
|
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div>
|
|
<div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex items-center justify-center gap-0.5">
|
|
<svg class="w-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 text-gray-300" 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>
|
|
</div>
|
|
<span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="relative inline-block" x-data="{ open: false }">
|
|
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
|
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="expand-detail hidden">
|
|
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">New York, NY</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div>
|
|
<div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex items-center justify-center gap-0.5">
|
|
<svg class="w-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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>
|
|
</div>
|
|
<span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="relative inline-block" x-data="{ open: false }">
|
|
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
|
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="expand-detail hidden">
|
|
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">San Francisco, CA</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div>
|
|
<div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex items-center justify-center gap-0.5">
|
|
<svg class="w-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 text-gray-300" 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-3.5 h-3.5 text-gray-300" 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>
|
|
</div>
|
|
<span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="relative inline-block" x-data="{ open: false }">
|
|
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
|
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="expand-detail hidden">
|
|
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Chicago, IL</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="bg-white hover:bg-gray-50/50 transition">
|
|
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div>
|
|
<div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex items-center justify-center gap-0.5">
|
|
<svg class="w-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 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-3.5 h-3.5 text-gray-300" 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>
|
|
</div>
|
|
<span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="relative inline-block" x-data="{ open: false }">
|
|
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
|
</button>
|
|
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
|
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
|
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="expand-detail hidden">
|
|
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Boston, MA</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div>
|
|
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@crmpro.com</p></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
|
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
|
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5" id="pagination-section">
|
|
<div class="p-5 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and working pagination controls</p></div>
|
|
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse min-w-[700px]">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Transaction ID</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Source Account</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Destination Account</th>
|
|
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Amount</th>
|
|
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
|
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Payment Method</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="transactions-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
|
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
|
<div class="flex items-center gap-1" id="transactions-page-btns"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="js/script.js"></script>
|
|
<script src="js/datatables.js"></script>
|
|
</body>
|
|
</html>
|