567 lines
29 KiB
HTML
567 lines
29 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>Fee & Pricing Management | 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=JetBrains+Mono&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"/>
|
|
<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;
|
|
}
|
|
.mono-font { font-family: 'JetBrains Mono', monospace; }
|
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* Low-contrast outline for cards */
|
|
.card-border { border: 1px solid #E2E8F0; }
|
|
</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 font-body-md text-on-surface antialiased">
|
|
<!-- SideNavBar Anchor -->
|
|
<aside class="flex flex-col fixed left-0 top-0 h-full p-4 gap-2 bg-white border-r border-slate-200 w-64 z-[60] hidden md:flex">
|
|
<div class="mb-8 px-2">
|
|
<h1 class="font-headline-md text-headline-md text-primary font-bold">Soundbox Admin</h1>
|
|
<p class="font-label-md text-label-md text-slate-500">Fintech Ops Suite</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="account_balance_wallet">account_balance_wallet</span>
|
|
<span class="font-label-md text-label-md">Reconciliation</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="security">security</span>
|
|
<span class="font-label-md text-label-md">Audit Logs</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 bg-secondary-container text-on-secondary-container rounded-xl font-bold" href="#">
|
|
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
|
<span class="font-label-md text-label-md">Fee Management</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
|
<span class="font-label-md text-label-md">Settlements</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="router">router</span>
|
|
<span class="font-label-md text-label-md">Device Health</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
|
<span class="font-label-md text-label-md">Support</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-4 border-t border-slate-100">
|
|
<button class="w-full bg-primary text-white py-3 rounded-xl font-label-md text-label-md font-bold mb-4 active:opacity-90">
|
|
Generate Report
|
|
</button>
|
|
<a class="flex items-center gap-3 px-3 py-2.5 text-danger hover:bg-red-50 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="font-label-md text-label-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<main class="md:ml-64 min-h-screen">
|
|
<!-- TopNavBar Anchor -->
|
|
<header class="flex justify-between items-center h-[72px] px-page-padding w-full sticky top-0 z-50 bg-surface border-b border-slate-200">
|
|
<div class="flex items-center gap-8">
|
|
<div class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</div>
|
|
<nav class="hidden lg:flex items-center gap-6">
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Dashboard</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Merchants</a>
|
|
<a class="text-primary border-b-2 border-primary font-bold pb-1 font-body-md text-body-md" href="#">Operations</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Audit</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative group">
|
|
<input class="bg-slate-100 border-none rounded-full px-4 py-2 text-body-md w-64 focus:ring-2 focus:ring-primary transition-all" placeholder="Search operations..." type="text"/>
|
|
<span class="material-symbols-outlined absolute right-3 top-2 text-slate-400">search</span>
|
|
</div>
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
<img alt="Administrator Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-primary-container" data-alt="A professional headshot of a corporate administrator in a modern tech office setting. The person is smiling confidently, wearing business-casual attire. The background features soft bokeh with office glass and warm interior lighting, reflecting a reliable and precise fintech environment. High-key lighting, corporate portrait style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhJ_b15g9taoZ2e12vFpcTrcSaFJHkdDkWsrFySkJKhqRP4sQaB9PVayTxwSA9Z7_SIdPgWY7sWxcgFYYWzhxhZb3t-hkRiTtpvi8XeDKczdOf24TxrBNaYN5pfafEfMSjixcdZ5eYihLlfn8rsCGAq5-vg8zo9fEyg3EDBW8-0bvwYBLPm5xSE8XpsM2x8h1NJx82SPEOaRF_5xqrXSE0Uqm2GApDe1vF-pIVW7XghgwW6L8bxw8mzAtZ1gGfK9WGxgh5UJe_Tsw"/>
|
|
</div>
|
|
</header>
|
|
<div class="p-page-padding max-w-[1600px] mx-auto space-y-gutter">
|
|
<!-- Header & Page Title -->
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg text-slate-900">Fee & Pricing Management</h2>
|
|
<p class="font-body-lg text-body-lg text-slate-500 mt-1">Configure transaction MDR, platform fees, and subscription tiers.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-xl font-label-md text-label-md text-secondary hover:bg-slate-50 transition-all">
|
|
<span class="material-symbols-outlined text-base" data-icon="history">history</span>
|
|
View Log
|
|
</button>
|
|
<button class="flex items-center gap-2 px-6 py-2 bg-primary text-white rounded-xl font-label-md text-label-md font-bold shadow-sm hover:shadow-md transition-all active:scale-95">
|
|
<span class="material-symbols-outlined text-base" data-icon="add">add</span>
|
|
New Pricing Tier
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Grid for Core Content -->
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<!-- Left Column: Pricing Tiers Selection -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-4">
|
|
<h3 class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Active Pricing Tiers</h3>
|
|
<div class="space-y-3">
|
|
<!-- Tier Card -->
|
|
<div class="bg-white p-card-padding rounded-xl card-border border-l-4 border-l-primary shadow-sm cursor-pointer hover:bg-slate-50 transition-all">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container text-xs font-bold rounded">DEFAULT</span>
|
|
<span class="material-symbols-outlined text-slate-300">more_vert</span>
|
|
</div>
|
|
<h4 class="font-headline-md text-headline-md text-slate-900">SME Basic</h4>
|
|
<p class="text-body-md text-slate-500 mb-4">Optimized for small-volume merchants.</p>
|
|
<div class="grid grid-cols-2 gap-4 border-t border-slate-100 pt-4">
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Base MDR</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">0.75%</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Subscription</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">$12/mo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-card-padding rounded-xl card-border shadow-sm cursor-pointer hover:bg-slate-50 transition-all opacity-80 border-l-4 border-l-transparent">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="px-2 py-0.5 bg-slate-100 text-slate-500 text-xs font-bold rounded">PREMIUM</span>
|
|
<span class="material-symbols-outlined text-slate-300">more_vert</span>
|
|
</div>
|
|
<h4 class="font-headline-md text-headline-md text-slate-900">Enterprise Plus</h4>
|
|
<p class="text-body-md text-slate-500 mb-4">High-volume corporate accounts.</p>
|
|
<div class="grid grid-cols-2 gap-4 border-t border-slate-100 pt-4">
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Base MDR</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">0.45%</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Subscription</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">$150/mo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-card-padding rounded-xl card-border shadow-sm cursor-pointer hover:bg-slate-50 transition-all opacity-80 border-l-4 border-l-transparent">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<span class="px-2 py-0.5 bg-slate-900 text-white text-xs font-bold rounded">CUSTOM</span>
|
|
<span class="material-symbols-outlined text-slate-300">more_vert</span>
|
|
</div>
|
|
<h4 class="font-headline-md text-headline-md text-slate-900">Government Special</h4>
|
|
<p class="text-body-md text-slate-500 mb-4">Public sector specific regulations.</p>
|
|
<div class="grid grid-cols-2 gap-4 border-t border-slate-100 pt-4">
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Base MDR</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">0.10%</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] text-slate-400 uppercase font-bold">Subscription</div>
|
|
<div class="font-metric-sm text-metric-sm text-primary">$0/mo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Detail Configuration & Bulk -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-gutter">
|
|
<!-- Configuration Form Card -->
|
|
<div class="bg-white rounded-xl card-border shadow-sm overflow-hidden">
|
|
<div class="bg-slate-50 p-page-padding border-b border-slate-200 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-slate-900">Configure Tier: SME Basic</h3>
|
|
<p class="text-body-md text-slate-500">Managing global transaction rules for all assigned merchants.</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg font-label-md text-label-md hover:bg-slate-300 transition-colors">Reset</button>
|
|
<button class="px-6 py-2 bg-success text-white rounded-lg font-label-md text-label-md font-bold shadow-sm hover:opacity-90 transition-all">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-page-padding grid grid-cols-2 gap-x-8 gap-y-10">
|
|
<!-- MDR Section -->
|
|
<div class="col-span-2 md:col-span-1 space-y-6">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="material-symbols-outlined text-primary" data-icon="percent">percent</span>
|
|
<h4 class="font-label-md text-label-md font-bold uppercase tracking-widest text-slate-400">Merchant Discount Rate (MDR)</h4>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Standard QRIS (%)</label>
|
|
<div class="relative">
|
|
<input class="w-full pl-4 pr-12 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="0.75"/>
|
|
<span class="absolute right-4 top-3.5 text-slate-400 font-bold">%</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Credit Card (Global) (%)</label>
|
|
<div class="relative">
|
|
<input class="w-full pl-4 pr-12 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="2.10"/>
|
|
<span class="absolute right-4 top-3.5 text-slate-400 font-bold">%</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Debit Card (%)</label>
|
|
<div class="relative">
|
|
<input class="w-full pl-4 pr-12 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="1.00"/>
|
|
<span class="absolute right-4 top-3.5 text-slate-400 font-bold">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Fixed & Subs Section -->
|
|
<div class="col-span-2 md:col-span-1 space-y-6">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="material-symbols-outlined text-primary" data-icon="payments">payments</span>
|
|
<h4 class="font-label-md text-label-md font-bold uppercase tracking-widest text-slate-400">Fixed Fees & Subscription</h4>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Processing Fee (Fixed)</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-slate-400 font-bold">$</span>
|
|
<input class="w-full pl-10 pr-4 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="0.25"/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Monthly Subscription</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-slate-400 font-bold">$</span>
|
|
<input class="w-full pl-10 pr-4 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="12.00"/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-body-md font-bold text-slate-700 mb-2">Settlement Transfer Fee</label>
|
|
<div class="relative">
|
|
<span class="absolute left-4 top-3.5 text-slate-400 font-bold">$</span>
|
|
<input class="w-full pl-10 pr-4 py-3 bg-slate-50 border-slate-200 rounded-xl focus:ring-primary focus:border-primary" step="0.01" type="number" value="0.50"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Advanced Logic Section -->
|
|
<div class="col-span-2 pt-6 border-t border-slate-100">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-label-md text-label-md font-bold text-slate-900 uppercase">Tier Logic Restrictions</h4>
|
|
<button class="text-primary font-label-md text-label-md hover:underline">+ Add Custom Rule</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-dashed border-slate-300">
|
|
<div class="p-2 bg-white rounded-lg shadow-sm">
|
|
<span class="material-symbols-outlined text-warning" data-icon="terminal">terminal</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-body-md font-bold">Cap Maximum Fee</p>
|
|
<p class="text-xs text-slate-500">Limit total MDR to $25.00 per TRX</p>
|
|
</div>
|
|
<label class="ml-auto inline-flex relative items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-dashed border-slate-300">
|
|
<div class="p-2 bg-white rounded-lg shadow-sm">
|
|
<span class="material-symbols-outlined text-info" data-icon="event_repeat">event_repeat</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-body-md font-bold">Prorated First Month</p>
|
|
<p class="text-xs text-slate-500">Calculate sub-fee based on join date</p>
|
|
</div>
|
|
<label class="ml-auto inline-flex relative items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bulk Update & Audit Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
<!-- Bulk Update Section -->
|
|
<div class="bg-slate-900 text-white p-page-padding rounded-xl shadow-lg relative overflow-hidden group">
|
|
<!-- Background Decor -->
|
|
<div class="absolute -right-8 -bottom-8 opacity-10 group-hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined text-[160px]" data-icon="update">update</span>
|
|
</div>
|
|
<div class="relative z-10 space-y-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-inverse-primary" data-icon="published_with_changes">published_with_changes</span>
|
|
<h3 class="font-headline-md text-headline-md">Bulk Fee Update</h3>
|
|
</div>
|
|
<p class="text-body-md text-slate-400">Apply a flat-rate adjustment or percentage shift to multiple tiers or specific merchant clusters instantly.</p>
|
|
<div class="pt-4 flex gap-3">
|
|
<button class="flex-1 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg font-label-md text-label-md transition-all">Select Target Groups</button>
|
|
<button class="px-4 py-2 bg-primary text-white rounded-lg font-label-md text-label-md font-bold shadow-sm active:scale-95 transition-all">Start Wizard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Audit History Table Block -->
|
|
<div class="bg-white rounded-xl card-border shadow-sm overflow-hidden flex flex-col">
|
|
<div class="p-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/50">
|
|
<h3 class="font-label-md text-label-md font-bold text-slate-900 uppercase tracking-widest">History of Fee Changes</h3>
|
|
<span class="text-xs text-primary cursor-pointer hover:underline">Full Log</span>
|
|
</div>
|
|
<div class="overflow-auto scrollbar-hide flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-white border-b border-slate-200 z-10">
|
|
<tr class="h-10">
|
|
<th class="px-4 font-label-md text-[10px] text-slate-400 uppercase">Timestamp</th>
|
|
<th class="px-4 font-label-md text-[10px] text-slate-400 uppercase">Change</th>
|
|
<th class="px-4 font-label-md text-[10px] text-slate-400 uppercase">Admin</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50">
|
|
<tr class="hover:bg-slate-50 transition-colors cursor-pointer group">
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-900 mono-font">2023-11-24 14:02</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-600">SME Basic QRIS <span class="text-danger font-bold">0.65% → 0.75%</span></div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-2">
|
|
<img class="w-5 h-5 rounded-full" data-alt="A profile picture of a male fintech administrator in professional lighting. The image captures a sense of reliability and technical expertise, with a clean office background and soft focused details. Modern, corporate aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCxKAv4VWZ9OCCWi88dAZObuF661dRUde_5BLaKeE3UrXBW9pB-rVmDIn_CN2v4sn5YbzCc5d3xrsHBFHzrB7_x-ZCPFaI2S6G8GM4IjV2zb7OXaKWIHp0gVPeQrjyX6jqsB_W5KYF7sTFmmXLo5m1LPG9oUKc-Z9p-Sd4ifd_a1zJpNrPrNjK0oMH1gBOpxd9FIm1S4MGfW9cInBsleK9ahacD7CvnW8e16_wsgBY-4m584k3j3UPvnLWc8jA596_lFDCE_vuu1lI"/>
|
|
<span class="text-[10px] font-bold text-slate-500 uppercase">J. DOE</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors cursor-pointer">
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-900 mono-font">2023-11-23 09:15</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-600">New Tier Created: <span class="text-success font-bold">Gov Special</span></div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-2">
|
|
<img class="w-5 h-5 rounded-full" data-alt="A portrait of a focused female technology specialist in a minimalist setting. The mood is calm and efficient, with high-quality daylight illuminating her profile. The styling is professional and modern, perfectly fitting a fintech operational environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAP0GXCeQomMoUl9_5bZfYL-05neftDyRV4m1EZaCT5_ftxnpdgjGsBAuX3jTZPZK6crUGyPBMwJNidpJtn506WQKZGl-Fl2arsXiAqgVAKv_Dma3l_c7eWHW0l_4KQVkbVPSApt1RIUFMRq3IIyC8LGKXXK7uE4YrLTqRqZ8mQG1p7o8O_sFghhIQE67kbzLGUUAWYgsx4O_71BBq14geWnJsRZaLzpsl_8570ILAqV6M3iIKV3eWFsqlITs6NiNNlVs8TIdUZbjA"/>
|
|
<span class="text-[10px] font-bold text-slate-500 uppercase">A. CHEN</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors cursor-pointer">
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-900 mono-font">2023-11-22 17:44</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="text-xs text-slate-600">Enterprise Subs <span class="text-info font-bold">$125 → $150</span></div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[8px] font-bold">SYS</div>
|
|
<span class="text-[10px] font-bold text-slate-500 uppercase">SYSTEM</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Raw Payload Viewer (Audit Block) -->
|
|
<div class="bg-slate-900 rounded-xl overflow-hidden shadow-inner relative group">
|
|
<div class="px-4 py-2 border-b border-slate-800 flex justify-between items-center">
|
|
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Active Configuration JSON</span>
|
|
<button class="flex items-center gap-1 text-[10px] text-slate-400 hover:text-white transition-colors">
|
|
<span class="material-symbols-outlined text-xs" data-icon="content_copy">content_copy</span>
|
|
Copy Payload
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-x-auto">
|
|
<pre class="mono-font text-sm text-green-400 scrollbar-hide">{
|
|
"tier_id": "tier_sme_001",
|
|
"tier_name": "SME Basic",
|
|
"pricing_logic": {
|
|
"mdr": {
|
|
"qris": 0.0075,
|
|
"credit_card": 0.0210,
|
|
"debit_card": 0.0100
|
|
},
|
|
"fixed_fees": {
|
|
"processing": 0.25,
|
|
"settlement": 0.50
|
|
},
|
|
"subscription": {
|
|
"monthly": 12.00,
|
|
"currency": "USD"
|
|
}
|
|
},
|
|
"constraints": {
|
|
"max_fee_cap": 25.00,
|
|
"prorated_subscription": false
|
|
},
|
|
"last_updated": "2023-11-24T14:02:11Z"
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Detail Drawer Placeholder (Right slide-in simulation) -->
|
|
<div class="fixed right-0 top-0 h-full w-[400px] bg-white shadow-2xl z-[100] transform translate-x-full transition-transform duration-300 ease-in-out" id="audit-drawer">
|
|
<div class="p-6 h-full flex flex-col">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h3 class="font-headline-md text-headline-md text-slate-900">Change Details</h3>
|
|
<button class="p-2 hover:bg-slate-100 rounded-full transition-colors" onclick="document.getElementById('audit-drawer').classList.add('translate-x-full')">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 space-y-8 overflow-y-auto pr-2">
|
|
<section>
|
|
<label class="font-label-md text-label-md text-slate-400 uppercase block mb-3">Timeline</label>
|
|
<div class="relative pl-6 space-y-6 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
|
|
<div class="relative">
|
|
<div class="absolute -left-[23px] top-1 w-4 h-4 rounded-full bg-success border-4 border-white"></div>
|
|
<p class="text-sm font-bold">Approved by Finance Dir</p>
|
|
<p class="text-xs text-slate-500">2023-11-24 15:30</p>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute -left-[23px] top-1 w-4 h-4 rounded-full bg-primary border-4 border-white"></div>
|
|
<p class="text-sm font-bold">Requested by J. Doe</p>
|
|
<p class="text-xs text-slate-500">2023-11-24 14:02</p>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute -left-[23px] top-1 w-4 h-4 rounded-full bg-slate-300 border-4 border-white"></div>
|
|
<p class="text-sm font-bold text-slate-400">Previous Value Verified</p>
|
|
<p class="text-xs text-slate-500">2023-11-24 13:45</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="p-4 bg-slate-50 rounded-xl space-y-3">
|
|
<label class="font-label-md text-label-md text-slate-400 uppercase block">Rationale</label>
|
|
<p class="text-sm text-slate-700 leading-relaxed italic">"Adjusting QRIS MDR to reflect new interbank processing costs and maintain margin for small-volume SME segment."</p>
|
|
</section>
|
|
</div>
|
|
<div class="pt-6 border-t border-slate-100 mt-auto">
|
|
<button class="w-full py-3 bg-slate-900 text-white rounded-xl font-bold font-label-md">Download Audit PDF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Micro-interaction for drawer
|
|
document.querySelector('tbody tr').addEventListener('click', function() {
|
|
document.getElementById('audit-drawer').classList.remove('translate-x-full');
|
|
});
|
|
|
|
// Dashboard Interaction
|
|
const cards = document.querySelectorAll('.lg\\:col-span-4 .bg-white');
|
|
cards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
cards.forEach(c => {
|
|
c.classList.remove('border-l-primary');
|
|
c.classList.add('border-l-transparent', 'opacity-80');
|
|
});
|
|
card.classList.remove('border-l-transparent', 'opacity-80');
|
|
card.classList.add('border-l-primary');
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |