Initial commit
This commit is contained in:
633
ui/merchant-settlement-history/index.html
Normal file
633
ui/merchant-settlement-history/index.html
Normal file
@ -0,0 +1,633 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Merchant Settlement History - Soundbox Ops</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.scroll-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scroll-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"success": "#16A34A",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"danger": "#DC2626",
|
||||
"slate-900": "#0F172A",
|
||||
"on-surface-variant": "#434655",
|
||||
"slate-100": "#F1F5F9",
|
||||
"tertiary-container": "#bc4800",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"error-container": "#ffdad6",
|
||||
"outline": "#737686",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"info": "#0EA5E9",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"surface-container": "#ededf9",
|
||||
"primary-container": "#2563eb",
|
||||
"warning": "#F59E0B",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#faf8ff",
|
||||
"slate-700": "#334155",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"tertiary": "#943700",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"on-surface": "#191b23",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"slate-200": "#E2E8F0",
|
||||
"inverse-surface": "#2e3039",
|
||||
"surface-tint": "#0053db",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#F8FAFC",
|
||||
"on-background": "#191b23",
|
||||
"slate-500": "#64748B",
|
||||
"primary": "#004ac6",
|
||||
"surface-bright": "#faf8ff",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"on-primary": "#ffffff",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"on-primary-container": "#eeefff",
|
||||
"surface-variant": "#e1e2ed",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"secondary-fixed": "#d3e4fe",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"secondary": "#505f76",
|
||||
"on-secondary-container": "#54647a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"topbar-height": "72px",
|
||||
"row-height": "52px",
|
||||
"page-padding": "24px",
|
||||
"card-padding": "20px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Inter"],
|
||||
"body-md": ["Inter"],
|
||||
"metric-sm": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
||||
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
||||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-md min-h-screen flex">
|
||||
<!-- Side Navigation Bar -->
|
||||
<aside class="flex flex-col fixed left-0 top-0 h-full p-4 gap-2 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700 w-64 z-50">
|
||||
<div class="mb-8 px-2 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary-container rounded-xl flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-headline-md text-headline-md text-primary leading-tight">Soundbox Admin</h1>
|
||||
<p class="font-label-md text-label-md text-slate-500">Fintech Ops Suite</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance_wallet">account_balance_wallet</span>
|
||||
<span>Reconciliation</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="security">security</span>
|
||||
<span>Audit Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
<span>Fee Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container dark:bg-on-secondary-fixed-variant text-on-secondary-container dark:text-on-secondary-fixed rounded-xl font-bold font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span>Settlements</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="router">router</span>
|
||||
<span>Device Health</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 border-t border-slate-100">
|
||||
<button class="w-full mb-4 bg-primary text-on-primary py-3 px-4 rounded-xl font-bold font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="add_chart">add_chart</span>
|
||||
Generate Report
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-secondary dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all font-label-md text-label-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 ml-64 min-h-screen flex flex-col">
|
||||
<!-- Top Bar -->
|
||||
<header class="flex justify-between items-center h-[72px] px-page-padding w-full sticky top-0 z-50 bg-surface dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-headline-md text-headline-md font-bold text-primary dark:text-inverse-primary">Settlement History</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative">
|
||||
<input class="bg-slate-100 border-none rounded-full px-4 py-2 text-body-md w-64 focus:ring-2 focus:ring-primary/20" placeholder="Search transactions..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2 text-slate-500" data-icon="search">search</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors" data-icon="notifications">notifications</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer hover:text-primary transition-colors" data-icon="settings">settings</span>
|
||||
<div class="h-10 w-10 rounded-full bg-slate-200 overflow-hidden border border-slate-300">
|
||||
<img alt="Administrator Avatar" class="w-full h-full object-cover" data-alt="A professional headshot of a smiling fintech administrator in a bright, modern corporate office. High-key lighting highlights the reliable and expert persona, matching a clean light-mode aesthetic with soft blue and grey tones." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAULoyxr37TXy6dAfagS4FSEQl7UpTG5XXKiqbc3Lt55-L4oWWcAjgJSHLfIRx3w_TYphBzQLrW9XdgtYvGMwDlsGslyaOunv0ANbViiiH0eSWWUrweqkulmIFSgKdqKoxSKdQ8L5ouHalFrIJtx0Lff4GQ-YmlbRwDJAfjaYzNFCucdQ4X7Dt7iIx83NWQ0Mf6PlAchGv7WoVm7K3TI8C6HkpMzpYhiphfN1LYtRDR4i-kW-Uk8Gcv2tPYheVSH_5-r9spt16EOl4"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-page-padding space-y-8 max-w-7xl mx-auto w-full">
|
||||
<!-- KPI Summary Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<!-- Available Balance -->
|
||||
<div class="bg-white p-card-padding rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-slate-500 mb-1">Available Balance</p>
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-background">$12,480.50</h3>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-primary-container/10 rounded-lg flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="text-success font-metric-sm text-metric-sm flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
|
||||
8.2%
|
||||
</span>
|
||||
<span class="text-slate-400 font-label-md text-label-md">vs last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Next Payout -->
|
||||
<div class="bg-white p-card-padding rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-slate-500 mb-1">Next Payout Date</p>
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-background">Oct 24, 2023</h3>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center text-warning">
|
||||
<span class="material-symbols-outlined" data-icon="event">event</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="font-label-md text-label-md text-slate-400">Estimated: <span class="text-on-surface font-semibold">$3,150.00</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Total Settled MTD -->
|
||||
<div class="bg-white p-card-padding rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-slate-500 mb-1">Total Settled (MTD)</p>
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-background">$45,210.00</h3>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center text-success">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="text-success font-metric-sm text-metric-sm flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
|
||||
12.5%
|
||||
</span>
|
||||
<span class="text-slate-400 font-label-md text-label-md">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filters and Actions -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-md text-label-md text-slate-500 whitespace-nowrap">Period:</span>
|
||||
<select class="border-slate-200 rounded-lg text-body-md focus:ring-primary focus:border-primary py-1 px-3">
|
||||
<option>Last 30 Days</option>
|
||||
<option>Last 90 Days</option>
|
||||
<option>Year to Date</option>
|
||||
<option>Custom Range</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-md text-label-md text-slate-500 whitespace-nowrap">Status:</span>
|
||||
<select class="border-slate-200 rounded-lg text-body-md focus:ring-primary focus:border-primary py-1 px-3">
|
||||
<option>All Statuses</option>
|
||||
<option>Processed</option>
|
||||
<option>Pending</option>
|
||||
<option>Failed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-primary bg-primary/5 hover:bg-primary/10 transition-colors rounded-lg font-label-md text-label-md">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="file_download">file_download</span>
|
||||
Export CSV
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary hover:opacity-90 transition-opacity rounded-lg font-label-md text-label-md">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="filter_list">filter_list</span>
|
||||
Advanced Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settlement History Table -->
|
||||
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-200 h-row-height">
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider">Settlement ID</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider">Date</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider">Bank Account</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider text-right">Gross Amount</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider text-right">Net Amount</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 font-label-md text-label-md text-slate-500 uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1: Processed -->
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height group">
|
||||
<td class="px-6 font-label-md text-label-md font-semibold text-primary">SET-902341</td>
|
||||
<td class="px-6 font-body-md text-body-md text-on-surface">Oct 21, 2023</td>
|
||||
<td class="px-6 font-body-md text-body-md text-slate-500">HDFC •••• 4492</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums">$2,450.00</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums font-semibold">$2,401.00</td>
|
||||
<td class="px-6">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Processed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 text-right">
|
||||
<button class="text-primary hover:underline font-label-md text-label-md flex items-center gap-1 ml-auto group-hover:opacity-100 opacity-0 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="download">download</span>
|
||||
Download Proof
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2: Pending -->
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height group">
|
||||
<td class="px-6 font-label-md text-label-md font-semibold text-primary">SET-902339</td>
|
||||
<td class="px-6 font-body-md text-body-md text-on-surface">Oct 20, 2023</td>
|
||||
<td class="px-6 font-body-md text-body-md text-slate-500">HDFC •••• 4492</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums">$1,800.00</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums font-semibold">$1,764.00</td>
|
||||
<td class="px-6">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning">
|
||||
Pending
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 text-right">
|
||||
<span class="text-slate-400 font-label-md text-label-md italic">Awaiting Bank</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: Processed -->
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height group">
|
||||
<td class="px-6 font-label-md text-label-md font-semibold text-primary">SET-902331</td>
|
||||
<td class="px-6 font-body-md text-body-md text-on-surface">Oct 19, 2023</td>
|
||||
<td class="px-6 font-body-md text-body-md text-slate-500">ICICI •••• 1102</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums">$4,120.00</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums font-semibold">$4,037.60</td>
|
||||
<td class="px-6">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Processed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 text-right">
|
||||
<button class="text-primary hover:underline font-label-md text-label-md flex items-center gap-1 ml-auto group-hover:opacity-100 opacity-0 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="download">download</span>
|
||||
Download Proof
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4: Failed -->
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height group">
|
||||
<td class="px-6 font-label-md text-label-md font-semibold text-primary">SET-902325</td>
|
||||
<td class="px-6 font-body-md text-body-md text-on-surface">Oct 18, 2023</td>
|
||||
<td class="px-6 font-body-md text-body-md text-slate-500">HDFC •••• 4492</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums">$500.00</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums font-semibold">$490.00</td>
|
||||
<td class="px-6">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger">
|
||||
Failed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 text-right">
|
||||
<button class="text-danger hover:underline font-label-md text-label-md flex items-center gap-1 ml-auto">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="error_outline">error_outline</span>
|
||||
View Error
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5: Processed -->
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height group">
|
||||
<td class="px-6 font-label-md text-label-md font-semibold text-primary">SET-902311</td>
|
||||
<td class="px-6 font-body-md text-body-md text-on-surface">Oct 17, 2023</td>
|
||||
<td class="px-6 font-body-md text-body-md text-slate-500">HDFC •••• 4492</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums">$3,600.00</td>
|
||||
<td class="px-6 font-body-md text-body-md text-right tabular-nums font-semibold">$3,528.00</td>
|
||||
<td class="px-6">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Processed
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 text-right">
|
||||
<button class="text-primary hover:underline font-label-md text-label-md flex items-center gap-1 ml-auto group-hover:opacity-100 opacity-0 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[16px]" data-icon="download">download</span>
|
||||
Download Proof
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 flex items-center justify-between border-t border-slate-100 bg-white">
|
||||
<p class="font-label-md text-label-md text-slate-500">Showing <span class="font-semibold text-on-surface">1 - 5</span> of <span class="font-semibold text-on-surface">124</span> disbursements</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 border border-slate-200 rounded-lg text-slate-400 hover:text-primary hover:bg-slate-50 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="px-3 py-1 border border-primary bg-primary text-on-primary rounded-lg font-label-md text-label-md">1</button>
|
||||
<button class="px-3 py-1 border border-slate-200 hover:border-primary rounded-lg font-label-md text-label-md">2</button>
|
||||
<button class="px-3 py-1 border border-slate-200 hover:border-primary rounded-lg font-label-md text-label-md">3</button>
|
||||
<button class="p-2 border border-slate-200 rounded-lg text-slate-500 hover:text-primary hover:bg-slate-50 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Transaction Trend & Detail Section -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
|
||||
<div class="lg:col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm p-card-padding">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">Weekly Settlement Volume</h4>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex items-center gap-1 font-label-md text-label-md text-primary">
|
||||
<span class="w-3 h-3 rounded-full bg-primary"></span> Gross
|
||||
</span>
|
||||
<span class="flex items-center gap-1 font-label-md text-label-md text-secondary">
|
||||
<span class="w-3 h-3 rounded-full bg-secondary"></span> Net
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between gap-4 px-4 pb-4">
|
||||
<!-- Bar Chart Mockup -->
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[40%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[60%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Mon</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[55%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[75%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Tue</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[30%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[45%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Wed</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[70%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[90%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Thu</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[45%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[65%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Fri</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[15%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[25%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Sat</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute bottom-0 left-1/4 w-3 bg-secondary rounded-t-sm h-[10%]" title="Net"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-3 bg-primary rounded-t-sm h-[20%]" title="Gross"></div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-slate-400">Sun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settlement Cycle Helper -->
|
||||
<div class="bg-primary p-card-padding rounded-xl border border-primary/20 shadow-sm text-on-primary">
|
||||
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
Settlement Cycle
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-6 h-6 rounded-full bg-on-primary text-primary flex items-center justify-center font-bold text-xs">1</div>
|
||||
<div class="w-0.5 h-full bg-on-primary/30 my-1"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md font-bold">Daily Batching</p>
|
||||
<p class="text-body-md opacity-80">Transactions from 12:00 AM to 11:59 PM are batched for settlement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-6 h-6 rounded-full bg-on-primary text-primary flex items-center justify-center font-bold text-xs">2</div>
|
||||
<div class="w-0.5 h-full bg-on-primary/30 my-1"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md font-bold">Fee Deduction</p>
|
||||
<p class="text-body-md opacity-80">Processing fees (approx. 2%) are automatically calculated and deducted.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-6 h-6 rounded-full bg-on-primary text-primary flex items-center justify-center font-bold text-xs">3</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md font-bold">Direct Deposit</p>
|
||||
<p class="text-body-md opacity-80">Funds reach your bank account within T+1 working days.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-white text-primary font-bold py-3 px-4 rounded-lg hover:bg-opacity-90 transition-all font-label-md text-label-md">
|
||||
Learn More About Payouts
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detail Drawer (Hidden by default) -->
|
||||
<div class="fixed inset-y-0 right-0 w-[450px] bg-white shadow-2xl z-[100] transform translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200 p-8 overflow-y-auto" id="detailDrawer">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="font-headline-md text-headline-md">Settlement Details</h3>
|
||||
<button class="p-2 hover:bg-slate-100 rounded-full transition-colors" onclick="toggleDrawer(false)">
|
||||
<span class="material-symbols-outlined" data-icon="close">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="p-4 bg-slate-50 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500">Net Amount Paid</p>
|
||||
<p class="font-metric-lg text-metric-lg text-primary">$2,401.00</p>
|
||||
<span class="inline-flex items-center mt-2 px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Successful Transfer
|
||||
</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-label-md text-label-md font-bold uppercase text-slate-400">Breakdown</h4>
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-100">
|
||||
<span class="text-body-md text-slate-600">Gross Processing Volume</span>
|
||||
<span class="font-metric-sm text-metric-sm">$2,450.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-100">
|
||||
<span class="text-body-md text-slate-600">Platform Fees (2%)</span>
|
||||
<span class="font-metric-sm text-metric-sm text-danger">-$49.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-slate-100">
|
||||
<span class="text-body-md text-slate-600">Adjustment/Refunds</span>
|
||||
<span class="font-metric-sm text-metric-sm">$0.00</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-body-md font-bold">Total Disbursed</span>
|
||||
<span class="font-metric-sm text-metric-sm font-bold text-primary">$2,401.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 pt-6">
|
||||
<h4 class="font-label-md text-label-md font-bold uppercase text-slate-400">Destination</h4>
|
||||
<div class="flex items-center gap-4 p-4 border border-slate-200 rounded-xl">
|
||||
<div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-500" data-icon="account_balance">account_balance</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md font-bold">HDFC Bank India</p>
|
||||
<p class="text-body-md text-slate-500">Checking Account •••• 4492</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 pt-6">
|
||||
<h4 class="font-label-md text-label-md font-bold uppercase text-slate-400">Transfer Log</h4>
|
||||
<div class="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-200">
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[22px] top-1 w-4 h-4 rounded-full bg-success ring-4 ring-white"></div>
|
||||
<p class="font-label-md text-label-md font-bold">Transfer Initiated</p>
|
||||
<p class="text-xs text-slate-400">Oct 21, 2023 • 09:12 AM</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[22px] top-1 w-4 h-4 rounded-full bg-success ring-4 ring-white"></div>
|
||||
<p class="font-label-md text-label-md font-bold">Bank Processing</p>
|
||||
<p class="text-xs text-slate-400">Oct 21, 2023 • 11:45 AM</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[22px] top-1 w-4 h-4 rounded-full bg-success ring-4 ring-white"></div>
|
||||
<p class="font-label-md text-label-md font-bold">Funds Credited</p>
|
||||
<p class="text-xs text-slate-400">Oct 21, 2023 • 04:30 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-8 flex flex-col gap-3">
|
||||
<button class="w-full bg-primary text-on-primary py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="download">download</span>
|
||||
Download Proof of Transfer
|
||||
</button>
|
||||
<button class="w-full bg-slate-100 text-slate-700 py-3 px-4 rounded-xl font-bold">
|
||||
Raise a Dispute
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Overlay for drawer -->
|
||||
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[90] hidden opacity-0 transition-opacity duration-300" id="drawerOverlay" onclick="toggleDrawer(false)"></div>
|
||||
</main>
|
||||
<script>
|
||||
function toggleDrawer(isOpen) {
|
||||
const drawer = document.getElementById('detailDrawer');
|
||||
const overlay = document.getElementById('drawerOverlay');
|
||||
|
||||
if (isOpen) {
|
||||
drawer.classList.remove('translate-x-full');
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => overlay.classList.add('opacity-100'), 10);
|
||||
} else {
|
||||
drawer.classList.add('translate-x-full');
|
||||
overlay.classList.remove('opacity-100');
|
||||
setTimeout(() => overlay.classList.add('hidden'), 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Simulating row click for detail view
|
||||
document.querySelectorAll('tbody tr').forEach(row => {
|
||||
row.style.cursor = 'pointer';
|
||||
row.addEventListener('click', () => toggleDrawer(true));
|
||||
});
|
||||
</script>
|
||||
<!-- ui-nav -->
|
||||
<div id="__sb_nav" style="position:fixed;left:16px;bottom:16px;z-index:9999;background:#fff;border:1px solid #e2e8f0;padding:8px 10px;border-radius:8px;box-shadow:0 6px 24px rgba(15,23,42,0.12);font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.4">
|
||||
<a href="/ui" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">UI Catalog</a>
|
||||
<a href="/ui/hub" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Hub</a>
|
||||
<a href="/ui/admin-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Admin Login</a>
|
||||
<a href="/ui/merchant-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Merchant Login</a>
|
||||
<a href="/ui/admin-dashboard-overview" style="margin-right:0;color:#2563eb;text-decoration:none;font-weight:600">Dashboard</a>
|
||||
</div>
|
||||
'
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user