493 lines
26 KiB
HTML
493 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Soundbox Ops - Disbursement Batches</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet"/>
|
|
<!-- Icons -->
|
|
<link href="https://fonts.googleapis.com/css2?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"/>
|
|
<!-- Tailwind -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"slate-200": "#E2E8F0",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"surface-container": "#ededf9",
|
|
"on-background": "#191b23",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-primary": "#ffffff",
|
|
"background": "#F8FAFC",
|
|
"surface-container-low": "#f3f3fe",
|
|
"info": "#0EA5E9",
|
|
"on-surface-variant": "#434655",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"on-primary-container": "#eeefff",
|
|
"error": "#ba1a1a",
|
|
"on-secondary-container": "#54647a",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"surface-variant": "#e1e2ed",
|
|
"tertiary": "#943700",
|
|
"surface": "#faf8ff",
|
|
"tertiary-container": "#bc4800",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"primary": "#004ac6",
|
|
"on-error-container": "#93000a",
|
|
"on-surface": "#191b23",
|
|
"on-primary-fixed": "#00174b",
|
|
"slate-900": "#0F172A",
|
|
"on-tertiary-container": "#ffede6",
|
|
"outline-variant": "#c3c6d7",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"secondary-container": "#d0e1fb",
|
|
"secondary": "#505f76",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"danger": "#DC2626",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"surface-dim": "#d9d9e5",
|
|
"slate-100": "#F1F5F9",
|
|
"surface-bright": "#faf8ff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"success": "#16A34A",
|
|
"primary-container": "#2563eb",
|
|
"surface-tint": "#0053db",
|
|
"inverse-primary": "#b4c5ff",
|
|
"slate-700": "#334155",
|
|
"inverse-surface": "#2e3039",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"warning": "#F59E0B",
|
|
"outline": "#737686",
|
|
"slate-500": "#64748B"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"page-padding": "24px",
|
|
"topbar-height": "72px",
|
|
"row-height": "52px",
|
|
"gutter": "24px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-md": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"body-lg": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"metric-sm": ["Inter"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }
|
|
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md overflow-hidden">
|
|
<!-- SideNavBar -->
|
|
<aside class="w-64 h-full fixed left-0 top-0 flex flex-col py-6 px-4 gap-2 bg-surface-container-lowest border-r border-slate-200 z-50">
|
|
<div class="mb-8 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
|
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Admin Console</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span>Overview</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
|
|
<span>Merchant Management</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
|
|
<span>Device Registry</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
|
<span>Transactions</span>
|
|
</a>
|
|
<!-- Active Tab -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 bg-secondary-container text-on-secondary-container font-bold rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="account_balance" style="font-variation-settings: 'FILL' 1;">account_balance</span>
|
|
<span>Ledger & Settlement</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
|
<span>Audit Control</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-slate-100 pt-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 font-body-md text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
<span>Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Wrapper -->
|
|
<main class="ml-64 flex flex-col h-screen">
|
|
<!-- TopNavBar -->
|
|
<header class="flex justify-between items-center w-full px-page-padding h-[72px] bg-surface-container-lowest border-b border-slate-200 z-40 sticky top-0">
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative w-64 group">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors" data-icon="search">search</span>
|
|
<input class="w-full bg-slate-50 border-none rounded-lg pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all" placeholder="Search batch or merchant..." type="text"/>
|
|
</div>
|
|
<nav class="hidden md:flex gap-6 items-center">
|
|
<a class="font-body-md font-bold text-primary border-b-2 border-primary h-[72px] flex items-center" href="#">Dashboard</a>
|
|
<a class="font-body-md text-on-surface-variant hover:text-primary transition-colors h-[72px] flex items-center" href="#">System Health</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
|
<img alt="Administrator Profile" class="w-10 h-10 rounded-full border border-slate-200" data-alt="A professional headshot of a software administrator in a modern office environment. The person is smiling warmly, conveying reliability and expertise. The background is a blurred high-tech workspace with soft bokeh of server lights and ergonomic furniture, maintaining a bright and corporate fintech aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDCXJdUBYnDdTG4e4iVIJeHJrev3W2zGYRLdM3emsKaeC8PvwIrFoadeyKJZZ7SIJabLa-H9EorlbbzSPmNWhWs0YsN05TP47OoT2YADkybLLRKe-kFBF5_RNbbwYXLsmQ9v46FgtXe_LJzWgJszNgEV8NKb44QLRMVEBkm-E440mJndyT1ozKuIYs4I5TgESnc5wcan9mtsaOMeE-2PE4ripuaqVI26dygzI4OH_k7m5KYG6BStH2NDH8nYorDhxlWWfwB8CUJQWU"/>
|
|
</div>
|
|
</header>
|
|
<!-- Content Canvas -->
|
|
<div class="flex-1 overflow-y-auto p-page-padding">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
|
<div>
|
|
<h2 class="font-display-lg text-display-lg text-on-surface">Disbursement Batches</h2>
|
|
<p class="font-body-lg text-slate-500 mt-1">Manage and track bulk merchant payouts across all bank partners.</p>
|
|
</div>
|
|
<button class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl font-bold hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
|
|
Generate New Batch
|
|
</button>
|
|
</div>
|
|
<!-- Dashboard KPIs -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
|
<p class="font-label-md text-slate-500 mb-2 uppercase tracking-wide">Pending Payouts</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg">₹ 14.2M</h3>
|
|
<span class="font-metric-sm text-success flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined !text-[18px]" data-icon="trending_up">trending_up</span> 12%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
|
<p class="font-label-md text-slate-500 mb-2 uppercase tracking-wide">Processing</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg">24</h3>
|
|
<span class="font-metric-sm text-warning flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined !text-[18px]" data-icon="sync">sync</span> Active
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
|
<p class="font-label-md text-slate-500 mb-2 uppercase tracking-wide">Avg. Success Rate</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg">99.4%</h3>
|
|
<span class="font-metric-sm text-success flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined !text-[18px]" data-icon="check_circle">check_circle</span> Stable
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
|
<p class="font-label-md text-slate-500 mb-2 uppercase tracking-wide">Total Fees (MTD)</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 class="font-metric-lg text-metric-lg">₹ 420K</h3>
|
|
<span class="font-metric-sm text-slate-500">vs ₹ 380K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Filters & Controls -->
|
|
<div class="bg-white border border-slate-200 rounded-t-xl p-4 flex flex-wrap items-center justify-between gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:border-primary cursor-pointer transition-colors">
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="account_balance">account_balance</span>
|
|
<select class="bg-transparent border-none p-0 text-body-md focus:ring-0 cursor-pointer">
|
|
<option>All Bank Partners</option>
|
|
<option>HDFC Bank</option>
|
|
<option>ICICI Bank</option>
|
|
<option>Yes Bank</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg hover:border-primary cursor-pointer transition-colors">
|
|
<span class="material-symbols-outlined text-slate-400" data-icon="calendar_month">calendar_month</span>
|
|
<span class="text-body-md">Oct 01 - Oct 15, 2023</span>
|
|
</div>
|
|
<button class="text-primary font-bold text-body-md px-4 py-2 hover:bg-slate-50 rounded-lg transition-colors">Clear All</button>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-label-md text-slate-500">Sorted by Batch Date</span>
|
|
<button class="p-2 text-slate-400 hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
|
</button>
|
|
<button class="p-2 text-slate-400 hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="download">download</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Data Table -->
|
|
<div class="bg-white border-x border-b border-slate-200 rounded-b-xl overflow-hidden shadow-sm">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b border-slate-200 h-[52px]">
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider">Batch ID</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider">Period</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider text-right">Merchants</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider text-right">Gross Amount</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider text-right">Total Fees</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider text-right">Payout Amount</th>
|
|
<th class="px-6 font-label-md text-slate-500 uppercase tracking-wider">Status</th>
|
|
<th class="px-6"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<!-- Row 1: Completed -->
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">#BAT-20231015-01</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">Oct 15, 08:00 - 12:00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">1,240</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 4,24,500.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 1,240.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">₹ 4,23,260.00</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-success/10 text-success font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-success"></span> Completed
|
|
</span>
|
|
</td>
|
|
<td class="px-6 text-right">
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors" data-icon="chevron_right">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2: Processing -->
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">#BAT-20231015-02</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">Oct 15, 12:00 - 16:00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">850</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 2,12,000.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 850.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">₹ 2,11,150.00</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-warning/10 text-warning font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-warning animate-pulse"></span> Processing
|
|
</span>
|
|
</td>
|
|
<td class="px-6 text-right">
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors" data-icon="chevron_right">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: Failed -->
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">#BAT-20231014-42</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">Oct 14, 20:00 - 23:59</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">412</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 95,400.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 412.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">₹ 94,988.00</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-danger/10 text-danger font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-danger"></span> Failed
|
|
</span>
|
|
</td>
|
|
<td class="px-6 text-right">
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors" data-icon="chevron_right">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4: Completed -->
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">#BAT-20231014-41</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">Oct 14, 16:00 - 20:00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">2,104</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 12,45,200.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 2,104.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">₹ 12,43,096.00</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-success/10 text-success font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-success"></span> Completed
|
|
</span>
|
|
</td>
|
|
<td class="px-6 text-right">
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors" data-icon="chevron_right">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 5: Completed -->
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">#BAT-20231014-40</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">Oct 14, 12:00 - 16:00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">1,892</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 8,12,050.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">₹ 1,892.00</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">₹ 8,10,158.00</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-success/10 text-success font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-success"></span> Completed
|
|
</span>
|
|
</td>
|
|
<td class="px-6 text-right">
|
|
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors" data-icon="chevron_right">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination -->
|
|
<div class="bg-white px-6 py-4 border-t border-slate-100 flex items-center justify-between">
|
|
<p class="text-body-md text-slate-500">Showing <span class="font-bold text-on-surface">1 - 5</span> of 248 batches</p>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined" data-icon="chevron_left">chevron_left</span>
|
|
</button>
|
|
<button class="w-10 h-10 bg-primary text-white font-bold rounded-lg">1</button>
|
|
<button class="w-10 h-10 hover:bg-slate-50 rounded-lg text-body-md">2</button>
|
|
<button class="w-10 h-10 hover:bg-slate-50 rounded-lg text-body-md">3</button>
|
|
<span class="px-2 text-slate-400">...</span>
|
|
<button class="w-10 h-10 hover:bg-slate-50 rounded-lg text-body-md">48</button>
|
|
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50">
|
|
<span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Detailed Drawer (Hidden by Default) -->
|
|
<div class="fixed inset-y-0 right-0 w-[480px] bg-white shadow-2xl z-[60] translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200 flex flex-col" id="detailDrawer">
|
|
<div class="p-6 border-b border-slate-100 flex items-center justify-between">
|
|
<h3 class="font-headline-md text-headline-md">Batch Details</h3>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-400 transition-colors" onclick="toggleDrawer()">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="font-label-md text-slate-500 uppercase">Batch ID</span>
|
|
<span class="font-body-md font-bold" id="drawerBatchId">#BAT-20231015-01</span>
|
|
</div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="font-label-md text-slate-500 uppercase">Settlement Bank</span>
|
|
<span class="flex items-center gap-2 font-body-md">
|
|
<span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-[10px] font-bold text-blue-700">HDFC</span>
|
|
HDFC Bank Ltd.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-4 mb-8">
|
|
<p class="font-label-md text-slate-500 mb-3 uppercase">Verification Progress</p>
|
|
<div class="relative h-2 w-full bg-slate-200 rounded-full overflow-hidden mb-2">
|
|
<div class="absolute inset-y-0 left-0 bg-success w-[100%] transition-all duration-1000"></div>
|
|
</div>
|
|
<p class="text-label-md text-success font-bold">100% KYC Verified & Cleaned</p>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<h4 class="font-body-md font-bold text-on-surface">Timeline</h4>
|
|
<div class="relative pl-6 border-l-2 border-slate-100 space-y-8">
|
|
<div class="relative">
|
|
<span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-success border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Batch Initialized</p>
|
|
<p class="text-label-md text-slate-500">Oct 15, 2023 • 08:00 AM</p>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-success border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Merchant Ledger Locked</p>
|
|
<p class="text-label-md text-slate-500">Oct 15, 2023 • 08:15 AM</p>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-success border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Bank File Uploaded (SFTP)</p>
|
|
<p class="text-label-md text-slate-500">Oct 15, 2023 • 09:30 AM</p>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-success border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Batch Settled</p>
|
|
<p class="text-label-md text-slate-500">Oct 15, 2023 • 11:45 AM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12">
|
|
<p class="font-label-md text-slate-500 mb-2 uppercase">Raw API Response</p>
|
|
<div class="bg-slate-900 rounded-lg p-4 font-mono text-[12px] text-primary-fixed-dim relative group">
|
|
<button class="absolute top-2 right-2 text-slate-500 hover:text-white transition-colors opacity-0 group-hover:opacity-100">
|
|
<span class="material-symbols-outlined !text-[18px]" data-icon="content_copy">content_copy</span>
|
|
</button>
|
|
<pre>{
|
|
"batch_id": "BAT-20231015-01",
|
|
"status": "COMPLETED",
|
|
"merchant_count": 1240,
|
|
"net_payout": 423260.00,
|
|
"currency": "INR",
|
|
"bank_ref": "HDFC_91230491_SET"
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 border-t border-slate-100 bg-slate-50 flex gap-3">
|
|
<button class="flex-1 px-4 py-3 bg-white border border-slate-200 rounded-xl font-bold hover:bg-slate-100 transition-colors">Download CSV</button>
|
|
<button class="flex-1 px-4 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors">Re-run Reconciliation</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
function toggleDrawer() {
|
|
const drawer = document.getElementById('detailDrawer');
|
|
if (drawer.classList.contains('translate-x-full')) {
|
|
drawer.classList.remove('translate-x-full');
|
|
} else {
|
|
drawer.classList.add('translate-x-full');
|
|
}
|
|
}
|
|
|
|
// Simulating row click to open drawer
|
|
document.querySelectorAll('tbody tr').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
const batchId = row.querySelector('td:first-child').textContent;
|
|
document.getElementById('drawerBatchId').textContent = batchId;
|
|
toggleDrawer();
|
|
});
|
|
});
|
|
</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> |