636 lines
34 KiB
HTML
636 lines
34 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>Merchant Management | Soundbox Ops</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"warning": "#F59E0B",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"inverse-surface": "#2e3039",
|
|
"surface": "#faf8ff",
|
|
"surface-container-low": "#f3f3fe",
|
|
"outline": "#737686",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"primary": "#004ac6",
|
|
"on-error-container": "#93000a",
|
|
"surface-tint": "#0053db",
|
|
"tertiary-container": "#bc4800",
|
|
"surface-variant": "#e1e2ed",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"surface-container-high": "#e7e7f3",
|
|
"info": "#0EA5E9",
|
|
"slate-500": "#64748B",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-surface": "#191b23",
|
|
"outline-variant": "#c3c6d7",
|
|
"error": "#ba1a1a",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"on-primary-fixed": "#00174b",
|
|
"surface-bright": "#faf8ff",
|
|
"surface-container": "#ededf9",
|
|
"error-container": "#ffdad6",
|
|
"slate-900": "#0F172A",
|
|
"inverse-primary": "#b4c5ff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"slate-700": "#334155",
|
|
"slate-200": "#E2E8F0",
|
|
"on-background": "#191b23",
|
|
"on-error": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"secondary": "#505f76",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"danger": "#DC2626",
|
|
"on-primary-container": "#eeefff",
|
|
"success": "#16A34A",
|
|
"on-tertiary-container": "#ffede6",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-surface-variant": "#434655",
|
|
"secondary-container": "#d0e1fb",
|
|
"primary-container": "#2563eb",
|
|
"background": "#F8FAFC",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"tertiary": "#943700",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"surface-dim": "#d9d9e5",
|
|
"on-secondary-container": "#54647a",
|
|
"slate-100": "#F1F5F9"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"page-padding": "24px",
|
|
"gutter": "24px",
|
|
"topbar-height": "72px",
|
|
"card-padding": "20px",
|
|
"row-height": "52px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-md": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"body-lg": ["Inter"],
|
|
"metric-lg": ["Inter"],
|
|
"metric-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.data-table-container::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
.data-table-container::-webkit-scrollbar-thumb {
|
|
background: #E2E8F0;
|
|
border-radius: 4px;
|
|
}
|
|
.data-table-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md antialiased min-h-screen">
|
|
<!-- Side Navigation Bar -->
|
|
<aside class="w-64 h-full fixed left-0 top-0 bg-surface-container-lowest border-r border-slate-200 flex flex-col py-6 px-4 gap-2 z-50">
|
|
<div class="flex items-center gap-3 px-2 mb-8">
|
|
<div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-on-primary">
|
|
<span class="material-symbols-outlined">storefront</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
|
<p class="font-label-md text-label-md text-on-surface-variant">Admin Console</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex flex-col gap-1 flex-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="font-body-md">Overview</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-bold rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
|
|
<span class="font-body-md">Merchant Management</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 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 class="font-body-md">Device Registry</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 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 class="font-body-md">Transactions</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
|
|
<span class="font-body-md">Ledger & Settlement</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 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 class="font-body-md">Audit Control</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto flex flex-col gap-1 border-t border-slate-100 pt-4">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-body-md">Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
<span class="font-body-md">Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Top Navigation Bar -->
|
|
<header class="fixed top-0 right-0 h-[72px] bg-surface-container-lowest border-b border-slate-200 flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding z-40">
|
|
<div class="flex items-center flex-1 max-w-xl">
|
|
<div class="relative w-full">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full focus:ring-2 focus:ring-primary/20 font-body-md" placeholder="Search system resources..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-on-surface-variant">
|
|
<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>
|
|
<div class="flex items-center gap-3 pl-2">
|
|
<div class="text-right">
|
|
<p class="font-body-md font-semibold text-on-surface">Alex Rivera</p>
|
|
<p class="font-label-md text-on-surface-variant">Senior Administrator</p>
|
|
</div>
|
|
<img alt="Administrator Profile" class="w-10 h-10 rounded-full border border-slate-200" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAtHGoIBcar94rMuPWVlFHcN-UeUZqFQEA_6n8Bwewxqe80TjDQjWPaBTLNsg4S-gBxFpcIY0xWawaDEJfZ2xfpmPL1CW1eV38Mi5CsTPYygJfh2wHlBGu8oJ-K1525FjWYMBigTWZNn4wbyTlVVEB1EonSgphK2PUCtOH3uee5wkDF6kKIWDWjSZVel6TAmtuSf2py8PmIFK00Rrt01xUOMAzo1pEfLvQkG7DJ4eyAJJhWYBfqcpgWEAXGgBxRcyTuKtt9o6ETfHo"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 mt-[72px] p-page-padding">
|
|
<!-- Page Header -->
|
|
<div class="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h2 class="font-display-lg text-display-lg text-on-surface">Merchant Management</h2>
|
|
<p class="font-body-lg text-on-surface-variant mt-1">Oversee and manage the complete merchant lifecycle and compliance.</p>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-3 rounded-xl flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all font-semibold">
|
|
<span class="material-symbols-outlined">add</span>
|
|
Register New Device
|
|
</button>
|
|
</div>
|
|
<!-- Filter Bar -->
|
|
<section class="bg-surface-container-lowest border border-slate-200 rounded-xl p-4 mb-6 flex flex-wrap items-center gap-4">
|
|
<div class="flex-1 min-w-[240px] relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
|
<input id="merchant-search-input" class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-body-md focus:ring-primary focus:border-primary" placeholder="Search by Merchant Name or ID..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<select id="merchant-status-filter" class="border border-slate-200 rounded-lg py-2 pl-3 pr-8 text-body-md focus:ring-primary bg-white">
|
|
<option value="">All Statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="pending">Pending</option>
|
|
</select>
|
|
<select id="merchant-category-filter" class="border border-slate-200 rounded-lg py-2 pl-3 pr-8 text-body-md focus:ring-primary bg-white">
|
|
<option value="">All Categories</option>
|
|
<option value="fb">F&B</option>
|
|
<option value="retail">Retail</option>
|
|
<option value="services">Services</option>
|
|
<option value="ecommerce">E-commerce</option>
|
|
</select>
|
|
<button class="flex items-center gap-2 border border-slate-200 rounded-lg py-2 px-4 text-on-surface hover:bg-slate-50 transition-colors font-semibold">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
Export CSV
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- Data Table Section -->
|
|
<section class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
|
|
<div class="data-table-container overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b border-slate-200">
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">ID</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Merchant Name</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Category</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Outlets</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Devices</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider">Last Transaction</th>
|
|
<th class="px-6 py-4 font-semibold text-on-surface-variant text-label-md uppercase tracking-wider text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="merchant-table-body" class="divide-y divide-slate-100"></tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-white border-t border-slate-200 flex items-center justify-between">
|
|
<p id="merchant-pagination-label" class="font-label-md text-on-surface-variant">
|
|
Showing <span class="font-bold text-on-surface">1 - 5</span> of <span class="font-bold text-on-surface">124</span> merchants
|
|
</p>
|
|
<div class="flex items-center gap-2">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-slate-200 text-slate-400 hover:bg-slate-50 disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary text-label-md font-bold">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded hover:bg-slate-50 text-on-surface-variant text-label-md">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded hover:bg-slate-50 text-on-surface-variant text-label-md">3</button>
|
|
<span class="text-slate-300">...</span>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded hover:bg-slate-50 text-on-surface-variant text-label-md">25</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded border border-slate-200 text-on-surface-variant hover:bg-slate-50">
|
|
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- KPI Cards Grid -->
|
|
<section class="grid grid-cols-1 md:grid-cols-4 gap-gutter mt-8">
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Total Merchants</p>
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">1,248</h3>
|
|
<div class="flex items-center gap-1 mt-2 text-success font-metric-sm">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
<span>+12.5%</span>
|
|
<span class="text-on-surface-variant ml-1">vs last month</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Active Devices</p>
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">4,812</h3>
|
|
<div class="flex items-center gap-1 mt-2 text-success font-metric-sm">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
<span>+4.2%</span>
|
|
<span class="text-on-surface-variant ml-1">vs last month</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Pending KYM</p>
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">24</h3>
|
|
<div class="flex items-center gap-1 mt-2 text-warning font-metric-sm">
|
|
<span class="material-symbols-outlined text-[16px]">priority_high</span>
|
|
<span>Needs attention</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<p class="font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Total Volume</p>
|
|
<h3 class="font-metric-lg text-metric-lg text-on-surface">$2.4M</h3>
|
|
<div class="flex items-center gap-1 mt-2 text-success font-metric-sm">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
<span>+18.4%</span>
|
|
<span class="text-on-surface-variant ml-1">vs last month</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Detail Drawer Placeholder (Hidden by default) -->
|
|
<div class="fixed top-0 right-0 h-full w-[480px] bg-white shadow-2xl z-[60] transform translate-x-full transition-transform duration-300 border-l border-slate-200" id="detail-drawer">
|
|
<div class="p-6 h-full flex flex-col">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface">Merchant Details</h3>
|
|
<button id="merchant-detail-close" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto" id="merchant-detail-content">
|
|
<!-- Content will be injected here -->
|
|
<div class="bg-slate-50 p-4 rounded-xl mb-6 flex items-center gap-4">
|
|
<div class="w-16 h-16 rounded-xl bg-white border border-slate-200 flex items-center justify-center overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="High-resolution, minimalist corporate logo mockup on a clean white background. Soft studio lighting creates a premium, modern tech aesthetic suitable for a detailed admin inspection panel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeTlL7iBlYwrDbVDHtYvDcce0uIyVd-9P6WnjYxruB94Q8dMXWwAFs6mv9sPK6Cf15cEm0dgG2nMeqBTXk0k0h6eh4laSjli21qrfsu8D2tT5M9oPy-Xonc1EgsgM24YUJl23Dydu2rmxDdoctzefQTtQm4EzUC4o2dBUQSRHp5KhgtL3qj-gegguvtEjH2cHIUKf40ZK9ew73QnvWr7fFYquaSAgMHt1vZgN6Ya9LJah4eRUlmklnZ_NeqxIPQN_AWOfvPCwQqo0"/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-md text-on-surface">Artisan Brew Co.</h4>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-success/10 text-success">ACTIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant uppercase">Merchant ID</p>
|
|
<p class="font-body-md font-semibold text-on-surface">MCH-88291</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant uppercase">Tax ID</p>
|
|
<p class="font-body-md font-semibold text-on-surface">TX-992-001</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant uppercase mb-2">Operational Health</p>
|
|
<div class="w-full bg-slate-100 rounded-full h-2">
|
|
<div class="bg-success h-2 rounded-full w-[94%]"></div>
|
|
</div>
|
|
<p class="text-right text-xs mt-1 font-semibold text-success">94% Positive Uptime</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface-variant uppercase mb-3">Recent System Audit</p>
|
|
<div class="bg-slate-900 rounded-lg p-4 font-mono text-xs text-slate-300 relative">
|
|
<button class="absolute top-2 right-2 text-slate-500 hover:text-white">
|
|
<span class="material-symbols-outlined text-[18px]">content_copy</span>
|
|
</button>
|
|
<pre>{
|
|
"event": "SETTLEMENT_BATCH_CLOSE",
|
|
"batch_id": "BT-7721",
|
|
"total": 4500.22,
|
|
"status": "SUCCESS",
|
|
"timestamp": "2023-10-24T14:22:11Z"
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto pt-6 border-t border-slate-200 grid grid-cols-2 gap-4">
|
|
<button class="py-3 border border-slate-200 rounded-xl font-semibold text-on-surface hover:bg-slate-50 transition-all">Suspend Account</button>
|
|
<button class="py-3 bg-primary text-on-primary rounded-xl font-semibold hover:opacity-90 transition-all">Edit Profiles</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/ui/shared/admin-api.js"></script>
|
|
<script>
|
|
const MerchantList = (() => {
|
|
const api = window.AdminUIAPI;
|
|
const searchInput = document.getElementById('merchant-search-input');
|
|
const statusFilter = document.getElementById('merchant-status-filter');
|
|
const categoryFilter = document.getElementById('merchant-category-filter');
|
|
const tableBody = document.getElementById('merchant-table-body');
|
|
const paginationLabel = document.getElementById('merchant-pagination-label');
|
|
const detailDrawer = document.getElementById('detail-drawer');
|
|
const detailContent = document.getElementById('merchant-detail-content');
|
|
|
|
let rows = [];
|
|
let outlets = [];
|
|
let devices = [];
|
|
let timer = null;
|
|
|
|
const normalizeText = (value) =>
|
|
value ? String(value).trim().toLowerCase() : '';
|
|
|
|
const toMerchantName = (merchant) =>
|
|
merchant?.brand_name || merchant?.legal_name || 'Unknown Merchant';
|
|
|
|
const statusBadgeClass = (merchant) => {
|
|
const state = normalizeText(merchant?.status || merchant?.onboarding_status);
|
|
if (state === 'inactive') {
|
|
return 'bg-danger/10 text-danger';
|
|
}
|
|
if (state === 'pending' || state === 'rejected') {
|
|
return 'bg-warning/10 text-warning';
|
|
}
|
|
return 'bg-success/10 text-success';
|
|
};
|
|
|
|
const statusText = (merchant) => {
|
|
const state = normalizeText(merchant?.status || merchant?.onboarding_status);
|
|
if (state === 'inactive') return 'INACTIVE';
|
|
if (state === 'pending') return 'PENDING';
|
|
if (state === 'rejected') return 'REJECTED';
|
|
return 'ACTIVE';
|
|
};
|
|
|
|
const outletCountByMerchant = () => {
|
|
const map = new Map();
|
|
outlets.forEach((item) => {
|
|
if (item?.merchant_id) {
|
|
map.set(item.merchant_id, (map.get(item.merchant_id) || 0) + 1);
|
|
}
|
|
});
|
|
return map;
|
|
};
|
|
|
|
const deviceCountByMerchant = () => {
|
|
const map = new Map();
|
|
devices.forEach((item) => {
|
|
const merchantId = item?.binding_summary?.merchant_id;
|
|
if (merchantId) {
|
|
map.set(merchantId, (map.get(merchantId) || 0) + 1);
|
|
}
|
|
});
|
|
return map;
|
|
};
|
|
|
|
const formatRow = (merchant) => {
|
|
const id = merchant.id || merchant.merchant_id;
|
|
const merchantCode = merchant.merchant_code || id || '-';
|
|
const outletCount = outletCountByMerchant().get(id) || 0;
|
|
const deviceCount = deviceCountByMerchant().get(id) || 0;
|
|
const badgeClass = statusBadgeClass(merchant);
|
|
const badgeText = statusText(merchant);
|
|
const name = toMerchantName(merchant);
|
|
|
|
return `
|
|
<tr class=\"hover:bg-slate-50 transition-colors group\" data-merchant-id=\"${id}\">
|
|
<td class=\"px-6 py-4 font-mono text-label-md text-on-surface-variant\">${merchantCode}</td>
|
|
<td class=\"px-6 py-4\">
|
|
<div class=\"flex items-center gap-3\">
|
|
<div class=\"w-8 h-8 rounded-lg bg-secondary-container flex items-center justify-center overflow-hidden\">${name.slice(0, 2).toUpperCase()}</div>
|
|
<span class=\"font-semibold text-on-surface\">${name}</span>
|
|
</div>
|
|
</td>
|
|
<td class=\"px-6 py-4\"><span class=\"text-body-md text-on-surface-variant\">${merchant.category || 'General'}</span></td>
|
|
<td class=\"px-6 py-4 font-mono text-body-md\">${outletCount}</td>
|
|
<td class=\"px-6 py-4 font-mono text-body-md\">${deviceCount}</td>
|
|
<td class=\"px-6 py-4\">
|
|
<span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${badgeClass}\">${badgeText}</span>
|
|
</td>
|
|
<td class=\"px-6 py-4 text-body-md text-on-surface-variant\">-</td>
|
|
<td class=\"px-6 py-4 text-right\">
|
|
<button class=\"text-slate-400 hover:text-primary transition-colors\">
|
|
<span class=\"material-symbols-outlined\">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
};
|
|
|
|
const render = () => {
|
|
const searchTerm = normalizeText(searchInput?.value);
|
|
const statusValue = normalizeText(statusFilter?.value);
|
|
const categoryValue = normalizeText(categoryFilter?.value);
|
|
const outletCounts = outletCountByMerchant();
|
|
const deviceCounts = deviceCountByMerchant();
|
|
|
|
const filtered = rows.filter((merchant) => {
|
|
const name = normalizeText(toMerchantName(merchant));
|
|
const code = normalizeText(merchant.merchant_code);
|
|
const status = normalizeText(merchant.status || merchant.onboarding_status);
|
|
const category = normalizeText(merchant.category || merchant.segment || '');
|
|
|
|
const matchSearch = !searchTerm || name.includes(searchTerm) || code.includes(searchTerm);
|
|
const matchStatus = !statusValue || status === statusValue;
|
|
const matchCategory = !categoryValue || category.includes(categoryValue);
|
|
|
|
return matchSearch && matchStatus && matchCategory;
|
|
});
|
|
|
|
if (!filtered.length) {
|
|
tableBody.innerHTML = '<tr><td colspan=\"8\" class=\"px-6 py-4 text-center text-on-surface-variant\">No merchants found</td></tr>';
|
|
} else {
|
|
tableBody.innerHTML = filtered
|
|
.map((merchant) => {
|
|
const id = merchant.id || merchant.merchant_id;
|
|
const merchantCode = merchant.merchant_code || id || '-';
|
|
const name = toMerchantName(merchant);
|
|
const badgeClass = statusBadgeClass(merchant);
|
|
const badgeText = statusText(merchant);
|
|
const outletCount = outletCounts.get(id) || 0;
|
|
const deviceCount = deviceCounts.get(id) || 0;
|
|
|
|
return `
|
|
<tr class=\"hover:bg-slate-50 transition-colors group\" data-merchant-id=\"${id}\">
|
|
<td class=\"px-6 py-4 font-mono text-label-md text-on-surface-variant\">${merchantCode}</td>
|
|
<td class=\"px-6 py-4\">
|
|
<div class=\"flex items-center gap-3\">
|
|
<div class=\"w-8 h-8 rounded-lg bg-secondary-container flex items-center justify-center overflow-hidden\">${name.slice(0, 2).toUpperCase()}</div>
|
|
<span class=\"font-semibold text-on-surface\">${name}</span>
|
|
</div>
|
|
</td>
|
|
<td class=\"px-6 py-4\"><span class=\"text-body-md text-on-surface-variant\">${merchant.category || 'General'}</span></td>
|
|
<td class=\"px-6 py-4 font-mono text-body-md\">${outletCount}</td>
|
|
<td class=\"px-6 py-4 font-mono text-body-md\">${deviceCount}</td>
|
|
<td class=\"px-6 py-4\">
|
|
<span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${badgeClass}\">${badgeText}</span>
|
|
</td>
|
|
<td class=\"px-6 py-4 text-body-md text-on-surface-variant\">-</td>
|
|
<td class=\"px-6 py-4 text-right\">
|
|
<button class=\"text-slate-400 hover:text-primary transition-colors\"><span class=\"material-symbols-outlined\">more_vert</span></button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
tableBody.querySelectorAll('tr[data-merchant-id]').forEach((row) => {
|
|
row.style.cursor = 'pointer';
|
|
row.onclick = () => {
|
|
const merchantId = row.getAttribute('data-merchant-id');
|
|
const merchant = rows.find((item) => (item.id || item.merchant_id) === merchantId);
|
|
if (!merchant) {
|
|
return;
|
|
}
|
|
openDrawer(merchant);
|
|
};
|
|
});
|
|
|
|
if (paginationLabel) {
|
|
paginationLabel.innerHTML = `Showing <span class=\"font-bold text-on-surface\">1 - ${Math.min(filtered.length, 10)}</span> of <span class=\"font-bold text-on-surface\">${filtered.length}</span> merchants`;
|
|
}
|
|
};
|
|
|
|
const openDrawer = (merchant) => {
|
|
const merchantCode = merchant.merchant_code || merchant.id || '-';
|
|
const name = toMerchantName(merchant);
|
|
const outletCounts = outletCountByMerchant();
|
|
const deviceCounts = deviceCountByMerchant();
|
|
const outCount = outletCounts.get(merchant.id || merchant.merchant_id) || 0;
|
|
const devCount = deviceCounts.get(merchant.id || merchant.merchant_id) || 0;
|
|
|
|
if (!detailContent) {
|
|
return;
|
|
}
|
|
|
|
detailContent.innerHTML = `
|
|
<div class=\"bg-slate-50 p-4 rounded-xl mb-6 flex items-center gap-4\">
|
|
<div class=\"w-16 h-16 rounded-xl bg-white border border-slate-200 flex items-center justify-center overflow-hidden\">${name.slice(0, 2).toUpperCase()}</div>
|
|
<div>
|
|
<h4 class=\"font-headline-md text-on-surface\">${name}</h4>
|
|
<p class=\"font-label-md text-label-md text-on-surface-variant uppercase mt-1\">Merchant ID: ${merchantCode}</p>
|
|
<span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold ${statusBadgeClass(merchant)}\">${statusText(merchant)}</span>
|
|
</div>
|
|
</div>
|
|
<div class=\"space-y-6\">
|
|
<div class=\"grid grid-cols-2 gap-4\">
|
|
<div>
|
|
<p class=\"font-label-md text-on-surface-variant uppercase\">Outlets</p>
|
|
<p class=\"font-bold text-on-surface\">${outCount}</p>
|
|
</div>
|
|
<div>
|
|
<p class=\"font-label-md text-on-surface-variant uppercase\">Devices</p>
|
|
<p class=\"font-bold text-on-surface\">${devCount}</p>
|
|
</div>
|
|
</div>
|
|
<pre class=\"bg-slate-900 text-slate-300 rounded-lg p-4 text-xs overflow-auto font-mono\">${JSON.stringify(merchant, null, 2)}</pre>
|
|
</div>
|
|
`;
|
|
detailDrawer.classList.remove('translate-x-full');
|
|
};
|
|
|
|
const closeDrawer = () => detailDrawer.classList.add('translate-x-full');
|
|
|
|
const refresh = async () => {
|
|
try {
|
|
api.requireToken();
|
|
const [merchantRows, outletRows, deviceRows] = await Promise.all([
|
|
api.listMerchants(),
|
|
api.listOutlets(),
|
|
api.listDevices()
|
|
]);
|
|
rows = Array.isArray(merchantRows) ? merchantRows : [];
|
|
outlets = Array.isArray(outletRows) ? outletRows : [];
|
|
devices = Array.isArray(deviceRows) ? deviceRows : [];
|
|
render();
|
|
} catch (error) {
|
|
console.error('[merchant-list] failed loading', error);
|
|
tableBody.innerHTML = '<tr><td colspan=\"8\" class=\"px-6 py-4 text-center text-danger\">Unable to load merchant data</td></tr>';
|
|
}
|
|
};
|
|
|
|
const onSearch = () => {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
timer = setTimeout(render, 220);
|
|
};
|
|
|
|
searchInput.addEventListener('input', onSearch);
|
|
statusFilter.addEventListener('change', render);
|
|
categoryFilter.addEventListener('change', render);
|
|
document.getElementById('merchant-detail-close')?.addEventListener('click', closeDrawer);
|
|
|
|
refresh();
|
|
return { refresh, openDrawer, closeDrawer };
|
|
})();
|
|
</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>
|