897 lines
53 KiB
HTML
897 lines
53 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="/ui/admin-dashboard-overview">
|
|
<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="/ui/merchant-detail-view">
|
|
<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="/ui/device-technical-detail">
|
|
<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="/ui/transaction-history-monitoring">
|
|
<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="/ui/settlement-batch-management">
|
|
<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="/ui/admin-reconciliation-management">
|
|
<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="/ui/hub">
|
|
<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="/ui/hub">
|
|
<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="/ui/admin-dashboard-overview">Dashboard</a>
|
|
<a class="font-body-md text-on-surface-variant hover:text-primary transition-colors h-[72px] flex items-center" href="/ui/admin-dashboard-overview">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 id="generate-settlement-batch" data-admin-permission="settlement:write" 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 disabled:opacity-60">
|
|
<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 id="kpi-pending-payouts" class="font-metric-lg text-metric-lg">Rp 0</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> Created
|
|
</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 id="kpi-created-batches" class="font-metric-lg text-metric-lg">0</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">Paid Batches</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 id="kpi-paid-batches" class="font-metric-lg text-metric-lg">0</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</p>
|
|
<div class="flex items-end justify-between">
|
|
<h3 id="kpi-total-fees" class="font-metric-lg text-metric-lg">Rp 0</h3>
|
|
<span id="kpi-total-adjustments" class="font-metric-sm text-slate-500">Adj Rp 0</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 id="settlement-status-filter" class="bg-transparent border-none p-0 text-body-md focus:ring-0 cursor-pointer">
|
|
<option value="">All Statuses</option>
|
|
<option value="created">Created</option>
|
|
<option value="paid">Paid</option>
|
|
<option value="failed">Failed</option>
|
|
<option value="cancelled">Cancelled</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 id="settlement-batch-rows" class="divide-y divide-slate-100">
|
|
<tr>
|
|
<td colspan="8" class="px-6 py-10 text-center text-slate-500">Loading settlement batches...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination -->
|
|
<div class="bg-white px-6 py-4 border-t border-slate-100 flex items-center justify-between">
|
|
<p id="settlement-pagination-summary" class="text-body-md text-slate-500">Showing 0 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">Merchant ID</span>
|
|
<span id="drawerMerchantId" class="font-body-md font-bold text-right break-all">-</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">Settlement Status</p>
|
|
<div class="relative h-2 w-full bg-slate-200 rounded-full overflow-hidden mb-2">
|
|
<div id="drawerProgressBar" class="absolute inset-y-0 left-0 bg-warning w-[40%] transition-all duration-1000"></div>
|
|
</div>
|
|
<p id="drawerStatusText" class="text-label-md text-warning font-bold">CREATED</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mb-8">
|
|
<div class="bg-white border border-slate-200 rounded-xl p-4">
|
|
<p class="font-label-md text-slate-500 uppercase mb-1">Gross</p>
|
|
<p id="drawerGrossAmount" class="font-body-md font-bold tabular-nums">Rp 0</p>
|
|
</div>
|
|
<div class="bg-white border border-slate-200 rounded-xl p-4">
|
|
<p class="font-label-md text-slate-500 uppercase mb-1">Fee</p>
|
|
<p id="drawerFeeAmount" class="font-body-md font-bold tabular-nums">Rp 0</p>
|
|
</div>
|
|
<div class="bg-white border border-slate-200 rounded-xl p-4">
|
|
<p class="font-label-md text-slate-500 uppercase mb-1">Net Payable</p>
|
|
<p id="drawerNetAmount" class="font-body-md font-bold tabular-nums">Rp 0</p>
|
|
</div>
|
|
<div class="bg-white border border-slate-200 rounded-xl p-4">
|
|
<p class="font-label-md text-slate-500 uppercase mb-1">Entries</p>
|
|
<p id="drawerEntryCount" class="font-body-md font-bold tabular-nums">0</p>
|
|
</div>
|
|
</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 id="drawerCreatedAt" class="text-label-md text-slate-500">-</p>
|
|
</div>
|
|
<div class="relative">
|
|
<span id="drawerPaidDot" class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-slate-300 border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Batch Settled</p>
|
|
<p id="drawerPaidAt" class="text-label-md text-slate-500">Not paid yet</p>
|
|
<p id="drawerPaidReference" class="text-label-md text-slate-500">Reference: -</p>
|
|
<p id="drawerPaidNote" class="text-label-md text-slate-500">Note: -</p>
|
|
<p id="drawerAdjustmentSummary" class="text-label-md text-slate-500">Adjustments: Rp 0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 space-y-4">
|
|
<h4 class="font-body-md font-bold text-on-surface">Payout Event History</h4>
|
|
<div id="drawerSettlementEvents" class="relative pl-6 border-l-2 border-slate-100 space-y-5">
|
|
<div class="relative">
|
|
<span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-slate-300 border-4 border-white shadow-sm"></span>
|
|
<p class="text-body-md font-bold">Loading events</p>
|
|
<p class="text-label-md text-slate-500">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form id="settlement-paid-form" class="mt-8 bg-slate-50 border border-slate-200 rounded-xl p-4 space-y-4">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-body-md font-bold text-on-surface">Confirm Payout</p>
|
|
<p class="text-label-md text-slate-500">Record manual payout proof before closing this batch.</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-warning" data-icon="receipt_long">receipt_long</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-paid-at">Paid At</label>
|
|
<input id="settlement-paid-at" type="datetime-local" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-paid-reference">Reference No</label>
|
|
<input id="settlement-paid-reference" type="text" maxlength="120" placeholder="Bank transfer / payout reference" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-paid-note">Note</label>
|
|
<textarea id="settlement-paid-note" maxlength="500" rows="3" placeholder="Optional reconciliation note" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30"></textarea>
|
|
</div>
|
|
</form>
|
|
<form id="settlement-reference-form" class="mt-8 bg-primary/5 border border-primary/10 rounded-xl p-4 space-y-4 hidden">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-body-md font-bold text-on-surface">Update Payout Reference</p>
|
|
<p class="text-label-md text-slate-500">Correct bank transfer reference or reconciliation note for a paid batch.</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary" data-icon="edit_note">edit_note</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-reference-update">Reference No</label>
|
|
<input id="settlement-reference-update" type="text" maxlength="120" placeholder="Bank transfer / payout reference" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-note-update">Note</label>
|
|
<textarea id="settlement-note-update" maxlength="500" rows="3" placeholder="Optional reconciliation note" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-primary/30"></textarea>
|
|
</div>
|
|
<button id="update-settlement-reference" data-admin-permission="settlement:pay" type="button" class="w-full px-4 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors disabled:opacity-50">Update Reference</button>
|
|
</form>
|
|
<form id="settlement-adjustment-form" class="mt-8 bg-warning/5 border border-warning/20 rounded-xl p-4 space-y-4">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-body-md font-bold text-on-surface">Record Adjustment</p>
|
|
<p class="text-label-md text-slate-500">Track payout dispute or correction without changing ledger entries.</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-warning" data-icon="balance">balance</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-adjustment-type">Type</label>
|
|
<select id="settlement-adjustment-type" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-warning/30">
|
|
<option value="credit">Credit Merchant</option>
|
|
<option value="debit">Debit Merchant</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-adjustment-amount">Amount</label>
|
|
<input id="settlement-adjustment-amount" type="number" min="1" step="0.01" placeholder="0" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-warning/30" required />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-adjustment-reason">Reason</label>
|
|
<input id="settlement-adjustment-reason" type="text" maxlength="300" placeholder="Required adjustment reason" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-warning/30" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-adjustment-note">Note</label>
|
|
<textarea id="settlement-adjustment-note" maxlength="500" rows="3" placeholder="Optional internal note" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-warning/30"></textarea>
|
|
</div>
|
|
<button id="record-settlement-adjustment" data-admin-permission="settlement:adjust" type="button" class="w-full px-4 py-3 bg-warning text-slate-900 rounded-xl font-bold hover:opacity-90 transition-colors disabled:opacity-50">Record Adjustment</button>
|
|
</form>
|
|
<form id="settlement-resolution-form" class="mt-8 bg-danger/5 border border-danger/10 rounded-xl p-4 space-y-4">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-body-md font-bold text-on-surface">Exception Resolution</p>
|
|
<p class="text-label-md text-slate-500">Mark payout as failed or cancel the batch before it is paid.</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-danger" data-icon="report">report</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-resolution-reason">Reason</label>
|
|
<input id="settlement-resolution-reason" type="text" maxlength="300" placeholder="Required reason" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-danger/30" required />
|
|
</div>
|
|
<div>
|
|
<label class="block text-label-md font-bold text-slate-500 uppercase mb-1" for="settlement-resolution-note">Note</label>
|
|
<textarea id="settlement-resolution-note" maxlength="500" rows="3" placeholder="Optional internal note" class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-white focus:outline-none focus:ring-2 focus:ring-danger/30"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button id="mark-settlement-failed" data-admin-permission="settlement:write" type="button" class="px-4 py-3 bg-white border border-danger/20 text-danger rounded-xl font-bold hover:bg-danger/5 transition-colors disabled:opacity-50">Mark Failed</button>
|
|
<button id="cancel-settlement-batch" data-admin-permission="settlement:write" type="button" class="px-4 py-3 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-100 transition-colors disabled:opacity-50">Cancel Batch</button>
|
|
</div>
|
|
</form>
|
|
<div id="settlement-reprocess-panel" class="mt-8 bg-primary/5 border border-primary/10 rounded-xl p-4 space-y-3 hidden">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-body-md font-bold text-on-surface">Reprocess Payable</p>
|
|
<p id="settlement-reprocess-detail" class="text-label-md text-slate-500">Move entries into a new created batch.</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary" data-icon="sync_alt">sync_alt</span>
|
|
</div>
|
|
<button id="reprocess-settlement-batch" data-admin-permission="settlement:write" type="button" class="w-full px-4 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors disabled:opacity-50">Reprocess Batch</button>
|
|
</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 id="drawerRawJson">{}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 border-t border-slate-100 bg-slate-50 flex gap-3">
|
|
<select id="settlement-export-format" class="w-[180px] px-3 py-3 bg-white border border-slate-200 rounded-xl font-body-md focus:outline-none focus:ring-2 focus:ring-primary/30">
|
|
<option value="standard">General CSV</option>
|
|
<option value="bank_generic">Bank Upload</option>
|
|
</select>
|
|
<button id="download-settlement-csv" data-admin-permission="settlement:export" class="flex-1 px-4 py-3 bg-white border border-slate-200 rounded-xl font-bold hover:bg-slate-100 transition-colors disabled:opacity-50">Download CSV</button>
|
|
<button id="mark-settlement-paid" data-admin-permission="settlement:pay" class="flex-1 px-4 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors disabled:opacity-50">Confirm Paid</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="/ui/shared/admin-api.js"></script>
|
|
<script>
|
|
const SettlementUI = (() => {
|
|
const api = window.AdminUIAPI;
|
|
if (!api) return;
|
|
|
|
const rowsEl = document.getElementById('settlement-batch-rows');
|
|
const generateBtn = document.getElementById('generate-settlement-batch');
|
|
const statusFilter = document.getElementById('settlement-status-filter');
|
|
const summaryEl = document.getElementById('settlement-pagination-summary');
|
|
const drawer = document.getElementById('detailDrawer');
|
|
const markPaidBtn = document.getElementById('mark-settlement-paid');
|
|
const downloadCsvBtn = document.getElementById('download-settlement-csv');
|
|
const exportFormatSelect = document.getElementById('settlement-export-format');
|
|
const paidForm = document.getElementById('settlement-paid-form');
|
|
const paidAtInput = document.getElementById('settlement-paid-at');
|
|
const paidReferenceInput = document.getElementById('settlement-paid-reference');
|
|
const paidNoteInput = document.getElementById('settlement-paid-note');
|
|
const referenceForm = document.getElementById('settlement-reference-form');
|
|
const referenceUpdateInput = document.getElementById('settlement-reference-update');
|
|
const noteUpdateInput = document.getElementById('settlement-note-update');
|
|
const updateReferenceBtn = document.getElementById('update-settlement-reference');
|
|
const adjustmentForm = document.getElementById('settlement-adjustment-form');
|
|
const adjustmentTypeInput = document.getElementById('settlement-adjustment-type');
|
|
const adjustmentAmountInput = document.getElementById('settlement-adjustment-amount');
|
|
const adjustmentReasonInput = document.getElementById('settlement-adjustment-reason');
|
|
const adjustmentNoteInput = document.getElementById('settlement-adjustment-note');
|
|
const recordAdjustmentBtn = document.getElementById('record-settlement-adjustment');
|
|
const resolutionForm = document.getElementById('settlement-resolution-form');
|
|
const resolutionReasonInput = document.getElementById('settlement-resolution-reason');
|
|
const resolutionNoteInput = document.getElementById('settlement-resolution-note');
|
|
const markFailedBtn = document.getElementById('mark-settlement-failed');
|
|
const cancelBatchBtn = document.getElementById('cancel-settlement-batch');
|
|
const reprocessPanel = document.getElementById('settlement-reprocess-panel');
|
|
const reprocessDetail = document.getElementById('settlement-reprocess-detail');
|
|
const reprocessBtn = document.getElementById('reprocess-settlement-batch');
|
|
const settlementEventsEl = document.getElementById('drawerSettlementEvents');
|
|
let batches = [];
|
|
let activeBatchId = null;
|
|
let activeBatchCode = '';
|
|
let adminProfile = null;
|
|
|
|
const money = (value) => api.formatMoney ? api.formatMoney(value) : `Rp ${Number(value || 0).toLocaleString('id-ID')}`;
|
|
const dt = (value) => api.formatDateTime ? api.formatDateTime(value) : (value || '-');
|
|
const setText = (id, value) => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.textContent = value || '-';
|
|
};
|
|
const toDateTimeLocalValue = (value) => {
|
|
const date = value ? new Date(value) : new Date();
|
|
if (Number.isNaN(date.getTime())) return '';
|
|
const offsetMs = date.getTimezoneOffset() * 60 * 1000;
|
|
return new Date(date.getTime() - offsetMs).toISOString().slice(0, 16);
|
|
};
|
|
const can = (permission) => api.hasPermission ? api.hasPermission(permission, adminProfile) : true;
|
|
|
|
const statusClass = (status) => {
|
|
if (status === 'paid') return 'bg-success/10 text-success';
|
|
if (status === 'failed' || status === 'cancelled') return 'bg-danger/10 text-danger';
|
|
return 'bg-warning/10 text-warning';
|
|
};
|
|
|
|
const statusDot = (status) => {
|
|
if (status === 'paid') return 'bg-success';
|
|
if (status === 'failed' || status === 'cancelled') return 'bg-danger';
|
|
return 'bg-warning animate-pulse';
|
|
};
|
|
|
|
const renderSettlementEvents = (events) => {
|
|
if (!settlementEventsEl) return;
|
|
const rows = Array.isArray(events) ? events : [];
|
|
if (!rows.length) {
|
|
settlementEventsEl.innerHTML = '<div class="relative"><span class="absolute -left-[33px] top-0 w-4 h-4 rounded-full bg-slate-300 border-4 border-white shadow-sm"></span><p class="text-body-md font-bold">No payout events yet</p><p class="text-label-md text-slate-500">-</p></div>';
|
|
return;
|
|
}
|
|
settlementEventsEl.innerHTML = rows.map((event) => {
|
|
const label = String(event.event_type || '').replace(/_/g, ' ').toUpperCase();
|
|
const actor = `${event.actor_type || 'system'}${event.actor_id ? ` · ${event.actor_id}` : ''}`;
|
|
return `
|
|
<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">${label}</p>
|
|
<p class="text-label-md text-slate-500">${dt(event.created_at)} · ${actor}</p>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
};
|
|
|
|
const renderKpis = () => {
|
|
const created = batches.filter((batch) => batch.status === 'created');
|
|
const paid = batches.filter((batch) => batch.status === 'paid');
|
|
const pendingAmount = created.reduce((sum, batch) => sum + Number(batch.net_payable_amount || 0), 0);
|
|
const totalFees = batches.reduce((sum, batch) => sum + Number(batch.platform_fee_amount || 0), 0);
|
|
const totalAdjustments = batches.reduce((sum, batch) => sum + Number(batch.metadata_json?.total_adjustment_amount || 0), 0);
|
|
setText('kpi-pending-payouts', money(pendingAmount));
|
|
setText('kpi-created-batches', String(created.length));
|
|
setText('kpi-paid-batches', String(paid.length));
|
|
setText('kpi-total-fees', money(totalFees));
|
|
setText('kpi-total-adjustments', `Adj ${money(totalAdjustments)}`);
|
|
};
|
|
|
|
const renderRows = () => {
|
|
if (!rowsEl) return;
|
|
if (!batches.length) {
|
|
rowsEl.innerHTML = '<tr><td colspan="8" class="px-6 py-10 text-center text-slate-500">No settlement batches yet.</td></tr>';
|
|
summaryEl.textContent = 'Showing 0 batches';
|
|
renderKpis();
|
|
return;
|
|
}
|
|
|
|
rowsEl.innerHTML = batches.map((batch) => `
|
|
<tr class="h-[52px] hover:bg-slate-50 transition-colors group cursor-pointer" data-batch-id="${batch.id}">
|
|
<td class="px-6 font-body-md font-bold text-primary tabular-nums">${batch.batch_code}</td>
|
|
<td class="px-6 font-body-md text-on-surface-variant">${dt(batch.cutoff_at)}</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">${batch.entry_count}</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">${money(batch.gross_amount)}</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums">${money(batch.platform_fee_amount)}</td>
|
|
<td class="px-6 font-body-md text-right tabular-nums font-bold">${money(batch.net_payable_amount)}</td>
|
|
<td class="px-6">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full ${statusClass(batch.status)} font-label-md">
|
|
<span class="w-1.5 h-1.5 rounded-full ${statusDot(batch.status)}"></span> ${String(batch.status).toUpperCase()}
|
|
</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>
|
|
`).join('');
|
|
|
|
rowsEl.querySelectorAll('tr[data-batch-id]').forEach((row) => {
|
|
row.addEventListener('click', () => openDrawer(row.dataset.batchId));
|
|
});
|
|
summaryEl.textContent = `Showing ${batches.length} batches`;
|
|
renderKpis();
|
|
};
|
|
|
|
const loadBatches = async () => {
|
|
try {
|
|
api.requireToken();
|
|
const query = { limit: 100 };
|
|
if (statusFilter.value) query.status = statusFilter.value;
|
|
batches = await api.listSettlementBatches(query);
|
|
renderRows();
|
|
} catch (error) {
|
|
rowsEl.innerHTML = '<tr><td colspan="8" class="px-6 py-10 text-center text-danger">Unable to load settlement batches.</td></tr>';
|
|
}
|
|
};
|
|
|
|
window.toggleDrawer = function toggleDrawer(forceOpen) {
|
|
if (!drawer) return;
|
|
const shouldOpen = typeof forceOpen === 'boolean' ? forceOpen : drawer.classList.contains('translate-x-full');
|
|
drawer.classList.toggle('translate-x-full', !shouldOpen);
|
|
};
|
|
|
|
const openDrawer = async (batchId) => {
|
|
activeBatchId = batchId;
|
|
const payload = await api.getSettlementBatch(batchId);
|
|
const batch = payload.batch;
|
|
activeBatchCode = batch.batch_code;
|
|
const metadata = batch.metadata_json || {};
|
|
const formalAdjustmentAmount = Array.isArray(payload.adjustments)
|
|
? payload.adjustments
|
|
.filter((item) => (item.approval_status || 'approved') === 'approved')
|
|
.reduce((sum, item) => sum + Number(item.signed_amount || 0), 0)
|
|
: Number(metadata.total_adjustment_amount || 0);
|
|
setText('drawerBatchId', batch.batch_code);
|
|
setText('drawerMerchantId', batch.merchant_id);
|
|
setText('drawerStatusText', String(batch.status).toUpperCase());
|
|
setText('drawerGrossAmount', money(batch.gross_amount));
|
|
setText('drawerFeeAmount', money(batch.platform_fee_amount));
|
|
setText('drawerNetAmount', money(batch.net_payable_amount));
|
|
setText('drawerEntryCount', String(batch.entry_count));
|
|
setText('drawerCreatedAt', dt(batch.created_at));
|
|
setText('drawerPaidAt', batch.paid_at ? dt(batch.paid_at) : 'Not paid yet');
|
|
setText('drawerPaidReference', `Reference: ${metadata.paid_reference || '-'}`);
|
|
setText('drawerPaidNote', `Note: ${metadata.paid_note || '-'}`);
|
|
setText('drawerAdjustmentSummary', `Adjustments: ${money(formalAdjustmentAmount)}`);
|
|
setText('drawerStatusText', batch.failure_reason ? `${String(batch.status).toUpperCase()} · ${batch.failure_reason}` : String(batch.status).toUpperCase());
|
|
renderSettlementEvents(payload.events || []);
|
|
document.getElementById('drawerRawJson').textContent = JSON.stringify(payload, null, 2);
|
|
const finalStatus = ['paid', 'failed', 'cancelled'].includes(batch.status);
|
|
const progressColor = batch.status === 'paid' ? 'bg-success' : batch.status === 'created' ? 'bg-warning' : 'bg-danger';
|
|
document.getElementById('drawerProgressBar').className = `absolute inset-y-0 left-0 ${progressColor} ${finalStatus ? 'w-[100%]' : 'w-[40%]'} transition-all duration-1000`;
|
|
document.getElementById('drawerPaidDot').className = `absolute -left-[33px] top-0 w-4 h-4 rounded-full ${finalStatus ? progressColor : 'bg-slate-300'} border-4 border-white shadow-sm`;
|
|
markPaidBtn.disabled = batch.status !== 'created' || !can('settlement:pay');
|
|
markPaidBtn.textContent = batch.status === 'created' ? 'Confirm Paid' : 'Paid';
|
|
if (paidForm) paidForm.classList.toggle('hidden', batch.status !== 'created');
|
|
if (referenceForm) referenceForm.classList.toggle('hidden', batch.status !== 'paid');
|
|
if (resolutionForm) resolutionForm.classList.toggle('hidden', batch.status !== 'created');
|
|
const canAdjust = !metadata.reprocessed_to_batch_id;
|
|
if (adjustmentForm) adjustmentForm.classList.toggle('hidden', !canAdjust);
|
|
const canReprocess = ['failed', 'cancelled'].includes(batch.status) && !metadata.reprocessed_to_batch_id;
|
|
if (reprocessPanel) reprocessPanel.classList.toggle('hidden', !canReprocess);
|
|
if (reprocessDetail) {
|
|
reprocessDetail.textContent = metadata.reprocessed_to_batch_id
|
|
? `Already reprocessed to ${metadata.reprocessed_to_batch_id}.`
|
|
: 'Move payable entries into a new created batch.';
|
|
}
|
|
if (paidAtInput) paidAtInput.value = toDateTimeLocalValue(new Date());
|
|
if (paidReferenceInput) paidReferenceInput.value = '';
|
|
if (paidNoteInput) paidNoteInput.value = '';
|
|
if (referenceUpdateInput) referenceUpdateInput.value = metadata.paid_reference || '';
|
|
if (noteUpdateInput) noteUpdateInput.value = metadata.paid_note || '';
|
|
if (updateReferenceBtn) {
|
|
updateReferenceBtn.disabled = batch.status !== 'paid' || !can('settlement:pay');
|
|
updateReferenceBtn.textContent = 'Update Reference';
|
|
}
|
|
if (adjustmentTypeInput) adjustmentTypeInput.value = 'credit';
|
|
if (adjustmentAmountInput) adjustmentAmountInput.value = '';
|
|
if (adjustmentReasonInput) adjustmentReasonInput.value = '';
|
|
if (adjustmentNoteInput) adjustmentNoteInput.value = '';
|
|
if (recordAdjustmentBtn) {
|
|
recordAdjustmentBtn.disabled = !canAdjust || !can('settlement:adjust');
|
|
recordAdjustmentBtn.textContent = 'Record Adjustment';
|
|
}
|
|
if (resolutionReasonInput) resolutionReasonInput.value = '';
|
|
if (resolutionNoteInput) resolutionNoteInput.value = '';
|
|
if (markFailedBtn) {
|
|
markFailedBtn.disabled = batch.status !== 'created' || !can('settlement:write');
|
|
markFailedBtn.textContent = 'Mark Failed';
|
|
}
|
|
if (cancelBatchBtn) {
|
|
cancelBatchBtn.disabled = batch.status !== 'created' || !can('settlement:write');
|
|
cancelBatchBtn.textContent = 'Cancel Batch';
|
|
}
|
|
if (reprocessBtn) {
|
|
reprocessBtn.disabled = !canReprocess || !can('settlement:write');
|
|
reprocessBtn.textContent = 'Reprocess Batch';
|
|
}
|
|
downloadCsvBtn.disabled = !can('settlement:export');
|
|
window.toggleDrawer(true);
|
|
};
|
|
|
|
generateBtn?.addEventListener('click', async () => {
|
|
generateBtn.disabled = true;
|
|
generateBtn.innerHTML = '<span class="material-symbols-outlined">sync</span>Generating...';
|
|
try {
|
|
await api.createSettlementBatches({ cutoff_at: new Date().toISOString() });
|
|
await loadBatches();
|
|
} finally {
|
|
generateBtn.disabled = false;
|
|
generateBtn.innerHTML = '<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>Generate New Batch';
|
|
}
|
|
});
|
|
|
|
statusFilter?.addEventListener('change', loadBatches);
|
|
markPaidBtn?.addEventListener('click', async () => {
|
|
if (!activeBatchId) return;
|
|
if (paidForm && !paidForm.reportValidity()) return;
|
|
const paidAt = paidAtInput?.value ? new Date(paidAtInput.value).toISOString() : new Date().toISOString();
|
|
const paidReference = paidReferenceInput?.value.trim();
|
|
const paidNote = paidNoteInput?.value.trim();
|
|
markPaidBtn.disabled = true;
|
|
markPaidBtn.textContent = 'Saving...';
|
|
try {
|
|
await api.markSettlementBatchPaid(activeBatchId, {
|
|
paid_at: paidAt,
|
|
paid_reference: paidReference,
|
|
paid_note: paidNote
|
|
});
|
|
await loadBatches();
|
|
await openDrawer(activeBatchId);
|
|
} catch (error) {
|
|
markPaidBtn.disabled = false;
|
|
markPaidBtn.textContent = 'Confirm Paid';
|
|
throw error;
|
|
}
|
|
});
|
|
const resolveBatch = async (status) => {
|
|
if (!activeBatchId) return;
|
|
if (resolutionForm && !resolutionForm.reportValidity()) return;
|
|
const reason = resolutionReasonInput?.value.trim();
|
|
const note = resolutionNoteInput?.value.trim();
|
|
const button = status === 'failed' ? markFailedBtn : cancelBatchBtn;
|
|
if (button) {
|
|
button.disabled = true;
|
|
button.textContent = status === 'failed' ? 'Marking...' : 'Cancelling...';
|
|
}
|
|
try {
|
|
if (status === 'failed') {
|
|
await api.markSettlementBatchFailed(activeBatchId, { reason, note });
|
|
} else {
|
|
await api.cancelSettlementBatch(activeBatchId, { reason, note });
|
|
}
|
|
await loadBatches();
|
|
await openDrawer(activeBatchId);
|
|
} catch (error) {
|
|
if (button) {
|
|
button.disabled = false;
|
|
button.textContent = status === 'failed' ? 'Mark Failed' : 'Cancel Batch';
|
|
}
|
|
throw error;
|
|
}
|
|
};
|
|
markFailedBtn?.addEventListener('click', () => resolveBatch('failed'));
|
|
cancelBatchBtn?.addEventListener('click', () => resolveBatch('cancelled'));
|
|
updateReferenceBtn?.addEventListener('click', async () => {
|
|
if (!activeBatchId) return;
|
|
if (referenceForm && !referenceForm.reportValidity()) return;
|
|
const paidReference = referenceUpdateInput?.value.trim();
|
|
const paidNote = noteUpdateInput?.value.trim();
|
|
updateReferenceBtn.disabled = true;
|
|
updateReferenceBtn.textContent = 'Updating...';
|
|
try {
|
|
await api.updateSettlementBatchReference(activeBatchId, {
|
|
paid_reference: paidReference,
|
|
paid_note: paidNote
|
|
});
|
|
await loadBatches();
|
|
await openDrawer(activeBatchId);
|
|
} catch (error) {
|
|
updateReferenceBtn.disabled = false;
|
|
updateReferenceBtn.textContent = 'Update Reference';
|
|
throw error;
|
|
}
|
|
});
|
|
recordAdjustmentBtn?.addEventListener('click', async () => {
|
|
if (!activeBatchId) return;
|
|
if (adjustmentForm && !adjustmentForm.reportValidity()) return;
|
|
const amount = Number(adjustmentAmountInput?.value || 0);
|
|
recordAdjustmentBtn.disabled = true;
|
|
recordAdjustmentBtn.textContent = 'Recording...';
|
|
try {
|
|
await api.recordSettlementBatchAdjustment(activeBatchId, {
|
|
adjustment_type: adjustmentTypeInput?.value || 'credit',
|
|
amount,
|
|
reason: adjustmentReasonInput?.value.trim(),
|
|
note: adjustmentNoteInput?.value.trim()
|
|
});
|
|
await loadBatches();
|
|
await openDrawer(activeBatchId);
|
|
} catch (error) {
|
|
recordAdjustmentBtn.disabled = false;
|
|
recordAdjustmentBtn.textContent = 'Record Adjustment';
|
|
throw error;
|
|
}
|
|
});
|
|
reprocessBtn?.addEventListener('click', async () => {
|
|
if (!activeBatchId) return;
|
|
reprocessBtn.disabled = true;
|
|
reprocessBtn.textContent = 'Reprocessing...';
|
|
try {
|
|
const result = await api.reprocessSettlementBatch(activeBatchId);
|
|
await loadBatches();
|
|
await openDrawer(result.new_batch?.id || activeBatchId);
|
|
} catch (error) {
|
|
reprocessBtn.disabled = false;
|
|
reprocessBtn.textContent = 'Reprocess Batch';
|
|
throw error;
|
|
}
|
|
});
|
|
downloadCsvBtn?.addEventListener('click', async () => {
|
|
if (!activeBatchId) return;
|
|
downloadCsvBtn.disabled = true;
|
|
downloadCsvBtn.textContent = 'Downloading...';
|
|
try {
|
|
const token = api.getToken();
|
|
const format = exportFormatSelect?.value || 'standard';
|
|
const response = await fetch(`/admin/settlement-batches/${activeBatchId}/export.csv?format=${encodeURIComponent(format)}`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`CSV export failed: ${response.status}`);
|
|
}
|
|
const blob = await response.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = format === 'bank_generic'
|
|
? `${activeBatchCode || activeBatchId}-bank-generic-payout.csv`
|
|
: `${activeBatchCode || activeBatchId}-payout-report.csv`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
URL.revokeObjectURL(url);
|
|
} finally {
|
|
downloadCsvBtn.disabled = false;
|
|
downloadCsvBtn.textContent = 'Download CSV';
|
|
}
|
|
});
|
|
|
|
(async () => {
|
|
adminProfile = await api.applyPermissions();
|
|
await loadBatches();
|
|
})();
|
|
})();
|
|
</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>
|