@{
    ViewData["Title"] = "Datatables4";
    ViewData["SidebarVariant"] = "4";
}
@section Styles {
    <link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
}

        <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> Cetak Massal</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> Ubah 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> Hapus Terpilih</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">No. Invoice</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">Jakarta, ID</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">Singapore, SG</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">Kuala Lumpur, MY</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">Bangkok, TH</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">
                <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 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">ID Transaksi</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">Akun Asal</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">Akun Tujuan</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">Nominal</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">Metode</th>
                            </tr>
                        </thead>
                        <tbody id="transactions-tbody">
                        </tbody>
                    </table>
                </div>
                <div id="transactions-pagination" 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 id="transactions-page-btns" class="flex items-center gap-1">
                    </div>
                </div>
                </div>
            </div>
        </div>

@section Scripts {
    <script src="/js/datatables.js" asp-append-version="true"></script>
}