wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
wirabasalamah
2026-05-25 08:22:12 +07:00
commit a152c99cce
154 changed files with 39033 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

528
design/admin_onboarding_review_queue/code.html Normal file
View File

@ -0,0 +1,528 @@
<!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 Onboarding Review Queue</title>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #F8FAFC;
}
</style>
</head>
<body class="font-body-md text-on-background antialiased overflow-hidden flex h-screen">
<!-- SideNavBar Integration -->
<aside class="flex flex-col h-full py-page-padding overflow-y-auto bg-surface-container-lowest dark:bg-surface-dim docked left-0 top-0 w-64 border-r border-slate-200 dark:border-outline-variant z-50">
<div class="px-6 mb-8">
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">FinOps Admin</h1>
<p class="text-on-surface-variant font-label-md text-label-md">System Management</p>
</div>
<nav class="flex-1 px-4 space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-secondary dark:text-on-surface-variant hover:bg-slate-100 dark:hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="font-body-md text-body-md">Dashboard</span>
</a>
<!-- Active Tab: Onboarding Queue -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary dark:text-primary-fixed font-bold border-r-4 border-primary dark:border-primary-fixed bg-surface-container-low dark:bg-surface-container-high transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="pending_actions">pending_actions</span>
<span class="font-body-md text-body-md">Onboarding Queue</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-secondary dark:text-on-surface-variant hover:bg-slate-100 dark:hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="store">store</span>
<span class="font-body-md text-body-md">Merchant Directory</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-secondary dark:text-on-surface-variant hover:bg-slate-100 dark:hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
<span class="font-body-md text-body-md">Device Fleet</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-secondary dark:text-on-surface-variant hover:bg-slate-100 dark:hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
<span class="font-body-md text-body-md">Audit Logs</span>
</a>
</nav>
<div class="px-4 mt-auto">
<button class="w-full flex items-center justify-center gap-2 py-3 bg-primary text-on-primary rounded-xl font-body-md text-body-md hover:opacity-90 transition-all">
<span class="material-symbols-outlined" data-icon="add">add</span>
New Application
</button>
<div class="mt-6 flex items-center gap-3 px-2 border-t border-slate-200 pt-6">
<img alt="Admin User Profile" class="w-10 h-10 rounded-full bg-surface-container-high" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdbiIwfk-ly7bNvqJvZRBEPcxgDxbiR5WJPG7vOQbUZ0O1ywOu-UXP_udMCARcUIH9HVZnLkbCDH7ERlB11QvmPMJSIWpi4rfkPaZhcUZ6AU1RUhFqjl9gOBbMoNqx6FbobMHKJ1vn50byWjrAgmpIJYBLxQPla5o-JDYcznG3UdqJNAAa-QVBV0BRQ_qh2ZJkTg2h-X-f3lVeBUxUWpQGbdeOTX7jQgcLFTnhelfjyZn3qlTUUOLjfGmV5EqmBIpBVWIotb-vTZM"/>
<div>
<p class="font-body-md text-body-md font-bold text-on-surface">Alex Rivera</p>
<p class="font-label-md text-label-md text-on-surface-variant">Lead Reviewer</p>
</div>
</div>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="flex-1 flex flex-col min-w-0 overflow-hidden relative">
<!-- TopAppBar -->
<header class="flex justify-between items-center h-topbar-height px-gutter z-40 bg-surface-container-lowest dark:bg-surface-dim border-b border-slate-200 dark:border-outline-variant">
<div class="flex items-center flex-1 max-w-md">
<div class="relative w-full">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
<input class="w-full bg-surface-container-low border-none rounded-full pl-10 pr-4 py-2 text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search applications..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-1">
<button class="hover:bg-surface-container dark:hover:bg-surface-container-highest rounded-full p-2 text-on-surface-variant transition-all active:scale-95 duration-100">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="hover:bg-surface-container dark:hover:bg-surface-container-highest rounded-full p-2 text-on-surface-variant transition-all active:scale-95 duration-100">
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
</button>
<button class="hover:bg-surface-container dark:hover:bg-surface-container-highest rounded-full p-2 text-on-surface-variant transition-all active:scale-95 duration-100">
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
</button>
</div>
</div>
</header>
<!-- Page Content -->
<div class="flex-1 overflow-y-auto p-page-padding bg-background">
<!-- Page Header -->
<div class="mb-8">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-1">Onboarding Review Queue</h2>
<p class="text-on-surface-variant font-body-lg text-body-lg">Verify and authorize new merchant accounts for the soundbox ecosystem.</p>
</div>
<!-- Summary Cards Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Pending Reviews Card -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl border border-slate-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start mb-4">
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Pending Reviews</span>
<span class="material-symbols-outlined text-warning" data-icon="pending">pending</span>
</div>
<div class="font-metric-lg text-metric-lg text-on-surface">142</div>
</div>
<div class="mt-4 flex items-center gap-1 text-danger font-metric-sm text-metric-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="trending_up">trending_up</span>
<span>+8% from yesterday</span>
</div>
</div>
<!-- Approved Today Card -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl border border-slate-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start mb-4">
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Approved Today</span>
<span class="material-symbols-outlined text-success" data-icon="check_circle">check_circle</span>
</div>
<div class="font-metric-lg text-metric-lg text-on-surface">28</div>
</div>
<div class="mt-4 flex items-center gap-1 text-success font-metric-sm text-metric-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="check">check</span>
<span>Daily quota met</span>
</div>
</div>
<!-- Average Review Time Card -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl border border-slate-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start mb-4">
<span class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Avg. Review Time</span>
<span class="material-symbols-outlined text-info" data-icon="timer">timer</span>
</div>
<div class="font-metric-lg text-metric-lg text-on-surface">4.2h</div>
</div>
<div class="mt-4 flex items-center gap-1 text-success font-metric-sm text-metric-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="trending_down">trending_down</span>
<span>-12m improvement</span>
</div>
</div>
</div>
<!-- Main Table Section -->
<div class="bg-surface-container-lowest rounded-xl border border-slate-200 overflow-hidden shadow-sm">
<div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between bg-surface-container-lowest sticky top-0 z-10">
<div class="flex items-center gap-4">
<h3 class="font-headline-md text-headline-md text-on-surface">Review Applications</h3>
<div class="flex gap-2">
<span class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-full text-label-md font-label-md">All: 142</span>
<span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-label-md font-label-md border border-warning/20">Urgent: 12</span>
</div>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-body-md hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="filter_list">filter_list</span>
Filter
</button>
<button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-body-md hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="sort">sort</span>
Sort
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full border-collapse text-left">
<thead>
<tr class="bg-surface-container-low text-on-surface-variant font-label-md text-label-md uppercase tracking-wider border-b border-slate-200">
<th class="px-6 py-4 font-semibold">Merchant Details</th>
<th class="px-6 py-4 font-semibold">Submission Date</th>
<th class="px-6 py-4 font-semibold">Category</th>
<th class="px-6 py-4 font-semibold text-center">Status</th>
<th class="px-6 py-4 font-semibold text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-primary/10 flex items-center justify-center text-primary font-bold">BK</div>
<div>
<p class="font-body-md text-body-md font-bold text-on-surface">Bistro Kopi Central</p>
<p class="font-label-md text-label-md text-on-surface-variant">ID: MER-49210</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface font-body-md text-body-md">Oct 24, 2023 09:12 AM</td>
<td class="px-6 py-4">
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded text-label-md font-label-md">Food &amp; Beverage</span>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-label-md font-label-md flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
Pending Review
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="px-4 py-1.5 bg-primary text-on-primary rounded-lg font-body-md text-body-md hover:bg-primary-container transition-all shadow-sm" onclick="toggleDrawer()">Review</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-tertiary/10 flex items-center justify-center text-tertiary font-bold">MS</div>
<div>
<p class="font-body-md text-body-md font-bold text-on-surface">Metro Supermarket</p>
<p class="font-label-md text-label-md text-on-surface-variant">ID: MER-49211</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface font-body-md text-body-md">Oct 24, 2023 10:45 AM</td>
<td class="px-6 py-4">
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded text-label-md font-label-md">Retail</span>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-label-md font-label-md flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
Pending Review
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="px-4 py-1.5 bg-primary text-on-primary rounded-lg font-body-md text-body-md hover:bg-primary-container transition-all shadow-sm">Review</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-info/10 flex items-center justify-center text-info font-bold">TL</div>
<div>
<p class="font-body-md text-body-md font-bold text-on-surface">TechLogistics Solutions</p>
<p class="font-label-md text-label-md text-on-surface-variant">ID: MER-49212</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface font-body-md text-body-md">Oct 24, 2023 01:20 PM</td>
<td class="px-6 py-4">
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded text-label-md font-label-md">Courier Services</span>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-label-md font-label-md flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
Pending Review
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="px-4 py-1.5 bg-primary text-on-primary rounded-lg font-body-md text-body-md hover:bg-primary-container transition-all shadow-sm">Review</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-success/10 flex items-center justify-center text-success font-bold">FP</div>
<div>
<p class="font-body-md text-body-md font-bold text-on-surface">Fresh Produce Mart</p>
<p class="font-label-md text-label-md text-on-surface-variant">ID: MER-49213</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface font-body-md text-body-md">Oct 24, 2023 03:05 PM</td>
<td class="px-6 py-4">
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded text-label-md font-label-md">Grocery</span>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-3 py-1 bg-warning/10 text-warning rounded-full text-label-md font-label-md flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
Pending Review
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="px-4 py-1.5 bg-primary text-on-primary rounded-lg font-body-md text-body-md hover:bg-primary-container transition-all shadow-sm">Review</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-slate-200 bg-surface-container-low flex items-center justify-between">
<p class="font-label-md text-label-md text-on-surface-variant">Showing 4 of 142 pending applications</p>
<div class="flex gap-2">
<button class="p-2 border border-slate-200 rounded-lg disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
</button>
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
<!-- FAB: Only for relevant screens, here it could be for manual entry -->
<!-- Suppressed on review page as per guidelines -->
</main>
<!-- Detail Drawer (Hidden by default) -->
<div class="fixed inset-y-0 right-0 w-[450px] bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200 overflow-y-auto" id="reviewDrawer">
<div class="p-6 border-b border-slate-200 flex items-center justify-between sticky top-0 bg-white z-20">
<h3 class="font-headline-md text-headline-md text-on-surface">Application Review</h3>
<button class="p-2 hover:bg-slate-100 rounded-full transition-colors" onclick="toggleDrawer()">
<span class="material-symbols-outlined" data-icon="close">close</span>
</button>
</div>
<div class="p-6 space-y-8">
<!-- Merchant Profile Header -->
<div class="flex items-center gap-4">
<img alt="Merchant Branding" class="w-16 h-16 rounded-xl bg-slate-50 border border-slate-200" data-alt="A clean and modern cafe logo design featuring a stylized coffee bean integrated with a minimal building silhouette, using a professional palette of navy blue and cream white. The aesthetic is corporate yet approachable, suitable for a boutique coffee bistro in a metropolitan business district." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYO-drQb2ROHjmD_cyYqfpNjwjJHYc0vDNoMcbyZZMbSh49q011wnPXp4EBwywXlUDF3lLTQ0zl0oDGgKsx36vmr95g-NKwe1OTPzPa5UIl9-CSS4pr3wMAxf57XWmnVDzNbd-gAyF_gNa2iONosLcTlIBjbjxjwrtEozE3imd2if846_M0L5CrzesCE8b4DX4U5TE9I4xSqlvctFSNVO6h7iIhzu6_rm5fB5wm8Lz6MDYqplo-h7xRDeRqa8l5RgKPzw9iTKtVzk"/>
<div>
<h4 class="font-headline-md text-headline-md text-on-surface">Bistro Kopi Central</h4>
<span class="px-2 py-0.5 bg-warning/10 text-warning rounded text-label-md font-label-md">High Priority Review</span>
</div>
</div>
<!-- Identity Verification Section -->
<section class="space-y-4">
<h5 class="font-body-md text-body-md font-bold text-on-surface-variant uppercase tracking-wider flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]" data-icon="verified_user">verified_user</span>
Entity Verification
</h5>
<div class="grid grid-cols-2 gap-4">
<div class="p-3 bg-surface-container-low rounded-lg">
<p class="font-label-md text-label-md text-on-surface-variant mb-1">Business Registration</p>
<p class="font-body-md text-body-md font-semibold">REG-2023-99120</p>
</div>
<div class="p-3 bg-surface-container-low rounded-lg">
<p class="font-label-md text-label-md text-on-surface-variant mb-1">Tax ID / PAN</p>
<p class="font-body-md text-body-md font-semibold">BKC991204X</p>
</div>
</div>
<div class="p-4 border border-slate-200 rounded-lg flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-info" data-icon="description">description</span>
<p class="font-body-md text-body-md">Incorporation_Doc.pdf</p>
</div>
<button class="text-primary font-body-md text-body-md font-semibold hover:underline">View File</button>
</div>
</section>
<!-- Raw Audit Block -->
<section class="space-y-4">
<h5 class="font-body-md text-body-md font-bold text-on-surface-variant uppercase tracking-wider flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]" data-icon="code">code</span>
Risk Score Payload
</h5>
<div class="bg-slate-900 rounded-xl p-4 relative font-mono text-sm text-slate-300">
<button class="absolute top-3 right-3 text-slate-500 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="content_copy">content_copy</span>
</button>
<pre class="whitespace-pre-wrap leading-relaxed">{
"risk_assessment": {
"score": 14,
"rating": "LOW",
"signals": [
"geofence_match: true",
"kyc_verification: pass",
"velocity_check: pass"
],
"last_check": "2023-10-24T09:12:04Z"
}
}</pre>
</div>
</section>
<!-- Timeline of Submission -->
<section class="space-y-4">
<h5 class="font-body-md text-body-md font-bold text-on-surface-variant uppercase tracking-wider flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]" data-icon="history">history</span>
Timeline
</h5>
<div class="space-y-6 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-200">
<div class="relative pl-8">
<span class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success flex items-center justify-center text-white">
<span class="material-symbols-outlined text-[14px]" data-icon="check" style="font-variation-settings: 'FILL' 1;">check</span>
</span>
<p class="font-body-md text-body-md font-bold text-on-surface">Application Submitted</p>
<p class="font-label-md text-label-md text-on-surface-variant">Oct 24, 09:12 AM by Merchant</p>
</div>
<div class="relative pl-8">
<span class="absolute left-0 top-1 w-6 h-6 rounded-full bg-info flex items-center justify-center text-white">
<span class="material-symbols-outlined text-[14px]" data-icon="robot" style="font-variation-settings: 'FILL' 1;">robot</span>
</span>
<p class="font-body-md text-body-md font-bold text-on-surface">Automated KYC Check</p>
<p class="font-label-md text-label-md text-on-surface-variant">Oct 24, 09:13 AM - System Approved</p>
</div>
<div class="relative pl-8">
<span class="absolute left-0 top-1 w-6 h-6 rounded-full border-2 border-warning bg-white flex items-center justify-center text-warning">
<span class="w-2 h-2 rounded-full bg-warning"></span>
</span>
<p class="font-body-md text-body-md font-bold text-on-surface">Pending Manual Review</p>
<p class="font-label-md text-label-md text-on-surface-variant">Assigning to Alex Rivera...</p>
</div>
</div>
</section>
</div>
<div class="p-6 border-t border-slate-200 bg-surface-container-lowest sticky bottom-0 z-20 flex gap-3">
<button class="flex-1 px-4 py-3 border border-danger text-danger rounded-xl font-body-md text-body-md font-bold hover:bg-danger/5 transition-all" onclick="toggleDrawer()">
Reject Account
</button>
<button class="flex-[2] px-4 py-3 bg-success text-on-primary rounded-xl font-body-md text-body-md font-bold hover:opacity-90 transition-all shadow-lg shadow-success/20">
Approve &amp; Activate
</button>
</div>
</div>
<!-- Overlay for Drawer -->
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 hidden opacity-0 transition-opacity duration-300" id="drawerOverlay" onclick="toggleDrawer()"></div>
<script>
function toggleDrawer() {
const drawer = document.getElementById('reviewDrawer');
const overlay = document.getElementById('drawerOverlay');
const isOpen = !drawer.classList.contains('translate-x-full');
if (isOpen) {
drawer.classList.add('translate-x-full');
overlay.classList.add('hidden');
overlay.classList.remove('opacity-100');
document.body.style.overflow = '';
} else {
drawer.classList.remove('translate-x-full');
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.add('opacity-100'), 10);
document.body.style.overflow = 'hidden';
}
}
</script>
</body></html>