597 lines
33 KiB
HTML
597 lines
33 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"/>
|
|
<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;700&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;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #e2e8f0;
|
|
border-radius: 10px;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-high": "#e7e7f3",
|
|
"on-primary": "#ffffff",
|
|
"background": "#F8FAFC",
|
|
"error-container": "#ffdad6",
|
|
"surface-container": "#ededf9",
|
|
"on-background": "#191b23",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"slate-200": "#E2E8F0",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"surface-container-low": "#f3f3fe",
|
|
"info": "#0EA5E9",
|
|
"on-secondary-container": "#54647a",
|
|
"on-primary-container": "#eeefff",
|
|
"error": "#ba1a1a",
|
|
"on-secondary-fixed-variant": "#38485d",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-error": "#ffffff",
|
|
"on-surface-variant": "#434655",
|
|
"surface": "#faf8ff",
|
|
"tertiary": "#943700",
|
|
"surface-variant": "#e1e2ed",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"on-primary-fixed": "#00174b",
|
|
"on-surface": "#191b23",
|
|
"primary": "#004ac6",
|
|
"on-error-container": "#93000a",
|
|
"secondary-fixed": "#d3e4fe",
|
|
"tertiary-container": "#bc4800",
|
|
"secondary-container": "#d0e1fb",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"outline-variant": "#c3c6d7",
|
|
"on-secondary-fixed": "#0b1c30",
|
|
"on-tertiary-container": "#ffede6",
|
|
"slate-900": "#0F172A",
|
|
"surface-tint": "#0053db",
|
|
"success": "#16A34A",
|
|
"primary-container": "#2563eb",
|
|
"surface-bright": "#faf8ff",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"slate-100": "#F1F5F9",
|
|
"surface-dim": "#d9d9e5",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed-dim": "#b7c8e1",
|
|
"secondary": "#505f76",
|
|
"inverse-on-surface": "#f0f0fb",
|
|
"danger": "#DC2626",
|
|
"slate-500": "#64748B",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"surface-container-highest": "#e1e2ed",
|
|
"warning": "#F59E0B",
|
|
"outline": "#737686",
|
|
"inverse-surface": "#2e3039",
|
|
"slate-700": "#334155",
|
|
"inverse-primary": "#b4c5ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"row-height": "52px",
|
|
"gutter": "24px",
|
|
"card-padding": "20px",
|
|
"topbar-height": "72px",
|
|
"page-padding": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"body-lg": ["Inter"],
|
|
"headline-lg": ["Plus Jakarta Sans"],
|
|
"metric-sm": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-md": ["Inter"],
|
|
"metric-lg": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
|
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
|
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-md overflow-hidden h-screen flex">
|
|
<!-- Sidebar (Shared Component Style) -->
|
|
<aside class="docked left-0 top-0 h-full w-64 border-r border-slate-200 bg-surface-container-lowest flex flex-col py-page-padding overflow-y-auto z-50">
|
|
<div class="px-6 mb-8">
|
|
<span class="font-headline-md text-headline-md font-bold text-primary">FinOps Admin</span>
|
|
<p class="text-secondary text-label-md">System Management</p>
|
|
</div>
|
|
<nav class="flex-1 px-4 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-body-md">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-primary font-bold border-r-4 border-primary bg-surface-container-low rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">pending_actions</span>
|
|
<span class="font-body-md">Onboarding Queue</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">store</span>
|
|
<span class="font-body-md">Merchant Directory</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">speaker_group</span>
|
|
<span class="font-body-md">Device Fleet</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">assignment</span>
|
|
<span class="font-body-md">Audit Logs</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-6 mt-auto pt-6 border-t border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary font-bold">JD</div>
|
|
<div>
|
|
<p class="font-label-md text-on-surface font-bold">Admin User</p>
|
|
<p class="text-[10px] text-secondary">Level 3 Access</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col h-screen overflow-hidden relative">
|
|
<!-- TopAppBar (Shared Component Style) -->
|
|
<header class="h-topbar-height border-b border-slate-200 bg-surface-container-lowest flex justify-between items-center px-gutter z-40">
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 hover:bg-slate-100 rounded-full transition-all">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-headline-md text-headline-md font-black text-primary" id="application-review-title">Review: Coffee & Co. Jakarta</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2 px-3 py-1 bg-warning/10 text-warning rounded-full">
|
|
<span class="material-symbols-outlined text-[18px]">timer</span>
|
|
<span class="text-label-md font-bold uppercase tracking-wider" id="application-review-status">Pending Review</span>
|
|
</div>
|
|
<div class="h-8 w-[1px] bg-slate-200"></div>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container rounded-full p-2 transition-all">notifications</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container rounded-full p-2 transition-all">help_outline</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-container rounded-full p-2 transition-all">account_circle</button>
|
|
</div>
|
|
</header>
|
|
<!-- Split Screen Layout -->
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Left Side: Information Details -->
|
|
<div class="w-1/2 border-r border-slate-200 overflow-y-auto custom-scrollbar p-gutter bg-white">
|
|
<div class="max-w-2xl mx-auto space-y-8">
|
|
<!-- Section: Business Details -->
|
|
<section>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="material-symbols-outlined text-primary">business</span>
|
|
<h2 class="font-headline-md text-headline-md text-slate-700">Business Details</h2>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-4 gap-x-8 bg-slate-50 p-6 rounded-xl border border-slate-200">
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Legal Business Name</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold" id="application-legal-name">PT. Kopi Nusantara Abadi</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Brand Name</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold" id="application-brand-name">Coffee & Co. Jakarta</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Business Category</label>
|
|
<p class="font-body-lg text-slate-900" id="application-business-category">Food & Beverage (Café)</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Business Type</label>
|
|
<p class="font-body-lg text-slate-900" id="application-business-type">Limited Liability (PT)</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="text-label-md text-slate-500 block">Business Address</label>
|
|
<p class="font-body-lg text-slate-900" id="application-business-address">Jl. Senopati No. 12, Kebayoran Baru, Jakarta Selatan, 12190</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section: PIC Information -->
|
|
<section>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="material-symbols-outlined text-primary">person</span>
|
|
<h2 class="font-headline-md text-headline-md text-slate-700">Person in Charge (PIC)</h2>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-4 gap-x-8 bg-slate-50 p-6 rounded-xl border border-slate-200">
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Full Name</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold" id="application-pic-name">Bambang Wijaya</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Identity Number (KTP)</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold tracking-widest" id="application-pic-identity">3174092803850001</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Email Address</label>
|
|
<p class="font-body-lg text-slate-900" id="application-pic-email">bambang.w@coffeeandco.id</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Phone Number</label>
|
|
<p class="font-body-lg text-slate-900" id="application-pic-phone">+62 812 3456 7890</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section: Bank Account -->
|
|
<section>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="material-symbols-outlined text-primary">account_balance</span>
|
|
<h2 class="font-headline-md text-headline-md text-slate-700">Bank Settlement Info</h2>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-4 gap-x-8 bg-slate-50 p-6 rounded-xl border border-slate-200">
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Bank Name</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold" id="application-bank-name">Bank Central Asia (BCA)</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Account Number</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold tracking-wider" id="application-bank-number">8820 123 456</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="text-label-md text-slate-500 block">Account Holder Name</label>
|
|
<p class="font-body-lg text-slate-900 font-semibold uppercase" id="application-bank-holder">PT KOPI NUSANTARA ABADI</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section: System Metadata -->
|
|
<section class="pb-12">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="material-symbols-outlined text-primary">info</span>
|
|
<h2 class="font-headline-md text-headline-md text-slate-700">Application Audit</h2>
|
|
</div>
|
|
<div class="bg-slate-900 p-4 rounded-xl font-mono text-xs text-slate-300">
|
|
<div class="flex justify-between items-center mb-2 border-b border-slate-700 pb-2">
|
|
<span id="application-audit-version">RAW PAYLOAD v2.4</span>
|
|
<button class="text-primary hover:text-primary-fixed transition-colors flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[14px]">content_copy</span> Copy
|
|
</button>
|
|
</div>
|
|
<pre class="overflow-x-auto" id="application-audit-json">{
|
|
"application_id": "APP-2023-9912",
|
|
"submission_date": "2023-11-24T10:22:31Z",
|
|
"device_provisioning": true,
|
|
"mcc_code": "5812",
|
|
"risk_score": 0.12,
|
|
"onboarding_channel": "Web Portal Direct"
|
|
}</pre>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side: Document Viewer -->
|
|
<div class="w-1/2 overflow-y-auto custom-scrollbar p-gutter bg-slate-100">
|
|
<div class="max-w-2xl mx-auto space-y-6">
|
|
<h2 class="font-headline-md text-headline-md text-slate-700 flex items-center gap-2 mb-6">
|
|
<span class="material-symbols-outlined">description</span>
|
|
Document Verification
|
|
</h2>
|
|
<!-- Document: KTP -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
|
<span class="font-label-md font-bold text-slate-700">IDENTITY CARD (KTP)</span>
|
|
<label class="flex items-center cursor-pointer">
|
|
<span class="mr-3 text-label-md font-semibold text-slate-600">VERIFY</span>
|
|
<div class="relative">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-slate-300 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-success"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="aspect-video relative overflow-hidden bg-slate-200 flex items-center justify-center group">
|
|
<img class="w-full h-full object-cover" data-alt="A professional high-resolution scan of an Indonesian national identity card, known as KTP, placed on a neutral gray surface. The document is clearly visible with sharp text and a passport-style portrait of a man. The lighting is bright and even, highlighting the security watermarks and holograms. The style is clean, corporate, and functional for a banking verification interface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCL7J17BsfNKQMf3o0iI0BpGl1Hh8YgbPq7EZR3bXzrNnpmSTlHwZPVoh26pCXFg88E-a8g922nUcI7AvOJwcw5S0Gsno58wLXKwwiSR5FcV-BFAm4Q08wr_Kcs8nKpxc3M4nkta8Y7-4Yt0peaX49sBp-zEzkT6xqWkPpyE93jprWPygz4Gh5D9yBkRZ4jV1qN9D9uwCoHo4WxPGFjispOoZEGArWYjwaItc4dvgSBxbQkjjzduJ-JyjsDIP06hmex1F0QsX6Srdw"/>
|
|
<div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<button class="bg-white/20 backdrop-blur-md p-3 rounded-full text-white hover:bg-white/40 transition-all">
|
|
<span class="material-symbols-outlined">zoom_in</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Document: NPWP -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
|
<span class="font-label-md font-bold text-slate-700">TAX ID (NPWP)</span>
|
|
<label class="flex items-center cursor-pointer">
|
|
<span class="mr-3 text-label-md font-semibold text-slate-600">VERIFY</span>
|
|
<div class="relative">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-slate-300 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-success"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="aspect-video relative overflow-hidden bg-slate-200 flex items-center justify-center group">
|
|
<img class="w-full h-full object-cover" data-alt="A clear, macro photograph of a business tax registration card, NPWP, displayed on a minimalist white desk. The card features a signature, a long identification number, and the Indonesian tax authority logo. The mood is professional and sterile, with high-key lighting that ensures every detail of the text is legible for administrative review. The color palette consists of soft grays and sharp blacks." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBjQ7TKbJxqbHDYoXjh1cDh_XtpuxnUJJV3DsHw6sfUkvnmVGX51TZ_yfk34jHWPVtoZ0pfkuy9TvMPy-8_uVVPZvGGNM4-uM_dQ1ggjDGlb2dgnMipAg08LKGP3IxTZo51_celEUR-PbyIpIyvW6Dqq7xcfLZjz7C7fHDvcdJELR3OwhyK0Wbqk1k_G_28yndui4EnizH02keVCIMQXnTyc26y98DJzThqw3Q3i-dDyosK9CJORMJGln6PPc0UHzCHfi8PpJkjtAY"/>
|
|
<div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<button class="bg-white/20 backdrop-blur-md p-3 rounded-full text-white hover:bg-white/40 transition-all">
|
|
<span class="material-symbols-outlined">zoom_in</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Document: Store Photo -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-24">
|
|
<div class="p-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
|
|
<span class="font-label-md font-bold text-slate-700">STORE FRONT PHOTO</span>
|
|
<label class="flex items-center cursor-pointer">
|
|
<span class="mr-3 text-label-md font-semibold text-slate-600">VERIFY</span>
|
|
<div class="relative">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-slate-300 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-success"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="aspect-video relative overflow-hidden bg-slate-200 flex items-center justify-center group">
|
|
<img class="w-full h-full object-cover" data-alt="A high-quality wide-angle shot of a modern urban coffee shop storefront in Jakarta. The aesthetic is industrial-chic with black steel frames, large glass windows, and a prominent 'Coffee & Co.' sign illuminated by warm LED lighting. The image is taken during a bright day with clear blue skies. The scene is clean, organized, and provides a clear view of the establishment's legitimacy for merchant onboarding." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwAmK-1t1yF_JTlRNxt3Hyq3jE6w5HKj9Guxbj2r6wTo88dw5Y4d1EUdhY4U6irCWigI-M3m515dLa_GwHDGgdNMqxMGzKLwjKkH6QAMB2MGcPercYSuTOWJ1zNKYNMOHLohpJ7QUI902A4t73aQwxVwCaj66ihYR671dASPRgZo2EjAi5kBKHd8UqlDREPJXYsx0Wi4FnVFUVKWJQtyz4KTyW30Vta94fRvIv8blgHgKILVCYC8oNEyd8kbTrhaidYR06YnrMzTw"/>
|
|
<div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<button class="bg-white/20 backdrop-blur-md p-3 rounded-full text-white hover:bg-white/40 transition-all">
|
|
<span class="material-symbols-outlined">zoom_in</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sticky Bottom Bar -->
|
|
<footer class="absolute bottom-0 left-0 right-0 h-20 bg-white border-t border-slate-200 flex items-center justify-between px-gutter z-50">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-label-md text-slate-500 font-bold uppercase">Assigned To</span>
|
|
<span class="text-body-md text-slate-900 font-semibold">Self (Admin #042)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button id="reject-merchant-btn" class="px-8 py-3 border-2 border-danger text-danger font-bold rounded-lg hover:bg-danger/5 transition-all flex items-center gap-2" onclick="toggleModal('rejectModal')">
|
|
<span class="material-symbols-outlined">close</span>
|
|
REJECT APPLICATION
|
|
</button>
|
|
<button id="approve-merchant-btn" class="px-8 py-3 bg-primary text-on-primary font-bold rounded-lg hover:bg-primary-container transition-all flex items-center gap-2 shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined">check_circle</span>
|
|
APPROVE MERCHANT
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
<!-- Rejection Modal Overlay -->
|
|
<div class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4" id="rejectModal">
|
|
<div class="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-200">
|
|
<div class="p-6 border-b border-slate-100 flex justify-between items-center">
|
|
<h3 class="text-headline-md font-bold text-slate-900">Rejection Reason</h3>
|
|
<button class="material-symbols-outlined text-slate-400 hover:text-slate-600" onclick="toggleModal('rejectModal')">close</button>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<p class="text-body-md text-slate-600">Please select the primary reason for rejecting this application. This will be sent to the merchant.</p>
|
|
<div id="reject-reason-list" class="space-y-2">
|
|
<label class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
|
|
<input class="text-primary focus:ring-primary h-4 w-4" name="reject_reason" type="radio" value="Incomplete/Blurry Documents"/>
|
|
<span class="text-body-md font-medium">Incomplete/Blurry Documents</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
|
|
<input class="text-primary focus:ring-primary h-4 w-4" name="reject_reason" type="radio" value="Invalid Tax ID (NPWP)"/>
|
|
<span class="text-body-md font-medium">Invalid Tax ID (NPWP)</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
|
|
<input class="text-primary focus:ring-primary h-4 w-4" name="reject_reason" type="radio" value="Address Mismatch"/>
|
|
<span class="text-body-md font-medium">Address Mismatch</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
|
|
<input class="text-primary focus:ring-primary h-4 w-4" name="reject_reason" type="radio" value="Restricted Category"/>
|
|
<span class="text-body-md font-medium">Restricted Category</span>
|
|
</label>
|
|
</div>
|
|
<div class="mt-4">
|
|
<label class="text-label-md font-bold text-slate-500 mb-2 block">ADDITIONAL COMMENTS</label>
|
|
<textarea id="reject-additional-comment" class="w-full border-slate-200 rounded-lg focus:ring-primary focus:border-primary text-body-md" placeholder="Explain the specific issue here..." rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-slate-50 flex gap-3">
|
|
<button class="flex-1 py-3 text-slate-600 font-bold hover:bg-slate-200 rounded-lg transition-colors" onclick="toggleModal('rejectModal')">CANCEL</button>
|
|
<button id="confirm-reject-btn" class="flex-1 py-3 bg-danger text-white font-bold rounded-lg hover:bg-danger/90 transition-colors">CONFIRM REJECTION</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="/ui/shared/admin-api.js"></script>
|
|
<script>
|
|
function toggleModal(id) {
|
|
const modal = document.getElementById(id);
|
|
if (!modal) {
|
|
return;
|
|
}
|
|
if (modal.classList.contains("hidden")) {
|
|
modal.classList.remove("hidden");
|
|
modal.classList.add("flex");
|
|
} else {
|
|
modal.classList.add("hidden");
|
|
modal.classList.remove("flex");
|
|
}
|
|
}
|
|
|
|
// Add some interaction to the verify toggles
|
|
document.querySelectorAll("input[type='checkbox']").forEach((checkbox) => {
|
|
checkbox.addEventListener("change", function () {
|
|
const card = this.closest(".bg-white");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
if (this.checked) {
|
|
card.classList.add("ring-2", "ring-success", "ring-inset");
|
|
} else {
|
|
card.classList.remove("ring-2", "ring-success", "ring-inset");
|
|
}
|
|
});
|
|
});
|
|
|
|
(function () {
|
|
const api = window.AdminUIAPI;
|
|
if (!api) {
|
|
return;
|
|
}
|
|
|
|
const qs = new URLSearchParams(window.location.search);
|
|
const merchantId = qs.get("merchant_id") || "";
|
|
const title = document.getElementById("application-review-title");
|
|
const statusBadge = document.getElementById("application-review-status");
|
|
const legalName = document.getElementById("application-legal-name");
|
|
const brandName = document.getElementById("application-brand-name");
|
|
const category = document.getElementById("application-business-category");
|
|
const typeField = document.getElementById("application-business-type");
|
|
const address = document.getElementById("application-business-address");
|
|
const picName = document.getElementById("application-pic-name");
|
|
const picIdentity = document.getElementById("application-pic-identity");
|
|
const picEmail = document.getElementById("application-pic-email");
|
|
const picPhone = document.getElementById("application-pic-phone");
|
|
const bankName = document.getElementById("application-bank-name");
|
|
const bankNumber = document.getElementById("application-bank-number");
|
|
const bankHolder = document.getElementById("application-bank-holder");
|
|
const auditVersion = document.getElementById("application-audit-version");
|
|
const auditJson = document.getElementById("application-audit-json");
|
|
const approveBtn = document.getElementById("approve-merchant-btn");
|
|
const rejectBtn = document.getElementById("confirm-reject-btn");
|
|
const reasonWrapper = document.getElementById("reject-reason-list");
|
|
const reasonTextarea = document.getElementById("reject-additional-comment");
|
|
|
|
const setText = (el, value, fallback = "-") => {
|
|
if (el) {
|
|
el.textContent = value || fallback;
|
|
}
|
|
};
|
|
|
|
const setStatus = (statusValue) => {
|
|
if (!statusBadge) {
|
|
return;
|
|
}
|
|
const normalized = String(statusValue || "pending").toLowerCase();
|
|
let label = "Pending Review";
|
|
let colorClass = "bg-warning/10 text-warning";
|
|
if (normalized === "approved") {
|
|
label = "Approved";
|
|
colorClass = "bg-success/10 text-success";
|
|
} else if (normalized === "rejected") {
|
|
label = "Rejected";
|
|
colorClass = "bg-danger/10 text-danger";
|
|
}
|
|
statusBadge.textContent = label;
|
|
statusBadge.className = `text-label-md font-bold uppercase tracking-wider ${colorClass}`;
|
|
};
|
|
|
|
const render = async () => {
|
|
try {
|
|
api.requireToken();
|
|
if (!merchantId) {
|
|
setText(title, "Review: Unknown Merchant");
|
|
setText(statusBadge, "Invalid Link");
|
|
setStatus("rejected");
|
|
return;
|
|
}
|
|
const merchant = await api.getMerchant(merchantId);
|
|
const merchantName = merchant.legal_name || merchant.brand_name || "Unknown Merchant";
|
|
setText(title, `Review: ${merchantName}`);
|
|
setText(legalName, merchant.legal_name);
|
|
setText(brandName, merchant.brand_name || merchant.legal_name);
|
|
setStatus(merchant.onboarding_status);
|
|
setText(category, merchant.category || merchant.business_category || "Food & Beverage");
|
|
setText(typeField, merchant.business_type || "Retail / F&B");
|
|
setText(address, merchant.address || "-");
|
|
setText(picName, merchant.pic_name || "Not provided");
|
|
setText(picIdentity, merchant.pic_identity || "Not provided");
|
|
setText(picEmail, merchant.pic_email || "Not provided");
|
|
setText(picPhone, merchant.pic_phone || "Not provided");
|
|
setText(bankName, merchant.settlement_account_type || "merchant_bank_account");
|
|
setText(bankNumber, merchant.settlement_account_reference || "Not provided");
|
|
setText(bankHolder, merchant.legal_name);
|
|
setText(auditVersion, `RAW PAYLOAD (${(merchant.onboarding_status || "pending").toUpperCase()})`);
|
|
if (auditJson) {
|
|
auditJson.textContent = JSON.stringify(
|
|
{ ...merchant, merchant_id: merchant.id, loaded_at: new Date().toISOString() },
|
|
null,
|
|
2
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("[admin application detail] failed loading", error);
|
|
setText(title, "Review: Unknown Merchant");
|
|
setText(statusBadge, "Load Failed");
|
|
}
|
|
};
|
|
|
|
const rejectApplication = async () => {
|
|
if (!merchantId) {
|
|
return;
|
|
}
|
|
const selected = reasonWrapper?.querySelector("input[name='reject_reason']:checked");
|
|
if (!selected) {
|
|
alert("Please choose a rejection reason");
|
|
return;
|
|
}
|
|
try {
|
|
const note = reasonTextarea?.value ? `: ${reasonTextarea.value.trim()}` : "";
|
|
await api.rejectMerchant(merchantId, { reason: `${selected.value}${note}` });
|
|
window.location.href = "/ui/admin-onboarding-review-queue";
|
|
} catch (error) {
|
|
alert(`Failed to reject merchant. ${error.message || "Please try again."}`);
|
|
}
|
|
};
|
|
|
|
const approveApplication = async () => {
|
|
if (!merchantId) {
|
|
return;
|
|
}
|
|
try {
|
|
await api.approveMerchant(merchantId);
|
|
window.location.href = "/ui/admin-onboarding-review-queue";
|
|
} catch (error) {
|
|
alert(`Failed to approve merchant. ${error.message || "Please try again."}`);
|
|
}
|
|
};
|
|
|
|
approveBtn?.addEventListener("click", () => {
|
|
if (confirm("Approve this application?")) {
|
|
approveApplication();
|
|
}
|
|
});
|
|
rejectBtn?.addEventListener("click", rejectApplication);
|
|
render();
|
|
})();
|
|
</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>
|