448 lines
25 KiB
HTML
448 lines
25 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">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">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">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">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">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">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">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">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">3174092803850001</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-label-md text-slate-500 block">Email Address</label>
|
|
<p class="font-body-lg text-slate-900">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">+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">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">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">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>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">{
|
|
"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 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 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 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"/>
|
|
<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"/>
|
|
<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"/>
|
|
<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"/>
|
|
<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 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 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>
|
|
function toggleModal(id) {
|
|
const modal = document.getElementById(id);
|
|
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 (this.checked) {
|
|
card.classList.add('ring-2', 'ring-success', 'ring-inset');
|
|
} else {
|
|
card.classList.remove('ring-2', 'ring-success', 'ring-inset');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |