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

380
ui/onboarding-document-upload/index.html Normal file
View File

@ -0,0 +1,380 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Merchant Onboarding - KYC Documentation</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&amp;family=Inter:wght@400;500;600;700&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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#ffdbcd",
"on-primary": "#ffffff",
"primary-fixed-dim": "#b4c5ff",
"error-container": "#ffdad6",
"warning": "#F59E0B",
"slate-200": "#E2E8F0",
"outline-variant": "#c3c6d7",
"surface-dim": "#d9d9e5",
"on-tertiary-container": "#ffede6",
"inverse-surface": "#2e3039",
"inverse-on-surface": "#f0f0fb",
"slate-100": "#F1F5F9",
"tertiary-fixed-dim": "#ffb596",
"on-tertiary-fixed-variant": "#7d2d00",
"on-surface": "#191b23",
"on-error-container": "#93000a",
"surface-tint": "#0053db",
"inverse-primary": "#b4c5ff",
"outline": "#737686",
"slate-500": "#64748B",
"secondary": "#505f76",
"on-primary-container": "#eeefff",
"surface-variant": "#e1e2ed",
"surface-container": "#ededf9",
"success": "#16A34A",
"on-tertiary-fixed": "#360f00",
"secondary-container": "#d0e1fb",
"on-primary-fixed-variant": "#003ea8",
"surface": "#faf8ff",
"slate-900": "#0F172A",
"primary-fixed": "#dbe1ff",
"secondary-fixed-dim": "#b7c8e1",
"on-tertiary": "#ffffff",
"on-secondary-fixed": "#0b1c30",
"on-secondary-fixed-variant": "#38485d",
"on-error": "#ffffff",
"on-secondary-container": "#54647a",
"background": "#F8FAFC",
"surface-container-lowest": "#ffffff",
"on-surface-variant": "#434655",
"surface-container-low": "#f3f3fe",
"on-background": "#191b23",
"surface-container-highest": "#e1e2ed",
"info": "#0EA5E9",
"danger": "#DC2626",
"surface-bright": "#faf8ff",
"error": "#ba1a1a",
"primary-container": "#2563eb",
"primary": "#004ac6",
"tertiary": "#943700",
"secondary-fixed": "#d3e4fe",
"tertiary-container": "#bc4800",
"surface-container-high": "#e7e7f3",
"on-secondary": "#ffffff",
"on-primary-fixed": "#00174b",
"slate-700": "#334155"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"page-padding": "24px",
"topbar-height": "72px",
"row-height": "52px",
"gutter": "24px",
"card-padding": "20px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
"metric-sm": ["Inter"],
"metric-lg": ["Inter"],
"label-md": ["Inter"],
"headline-lg": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"body-lg": ["Inter"]
},
"fontSize": {
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.upload-dashed {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23CBD5E1' stroke-width='2' stroke-dasharray='8%2c 8' stroke-linecap='square'/%3e%3c/svg%3e");
}
.upload-dashed:hover {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23004ac6' stroke-width='2' stroke-dasharray='8%2c 8' stroke-linecap='square'/%3e%3c/svg%3e");
}
</style>
</head>
<body class="bg-background text-on-background font-body-md min-h-screen">
<!-- Stepper Navigation Header -->
<header class="bg-surface-container-lowest border-b border-slate-200 sticky top-0 z-50">
<div class="max-w-5xl mx-auto px-page-padding h-[80px] flex items-center justify-between">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-primary text-3xl" data-icon="soundbox">soundpod</span>
<div class="flex flex-col">
<span class="font-headline-md text-headline-md text-primary">Soundbox Ops</span>
<span class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Merchant Onboarding</span>
</div>
</div>
<div class="hidden md:flex items-center gap-2">
<span class="font-label-md text-label-md text-slate-500">Need help?</span>
<a class="text-primary font-bold hover:underline" href="#">Contact Support</a>
</div>
</div>
<!-- Progress Bar Component -->
<div class="bg-surface-container-low border-b border-slate-200">
<div class="max-w-5xl mx-auto px-page-padding py-4">
<div class="flex items-center justify-between relative">
<!-- Progress Line -->
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-slate-200 -translate-y-1/2 z-0"></div>
<div class="absolute top-1/2 left-0 w-[75%] h-[2px] bg-primary -translate-y-1/2 z-0"></div>
<!-- Steps -->
<div class="relative z-10 flex flex-col items-center gap-2 group">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xs ring-4 ring-white">
<span class="material-symbols-outlined text-sm" data-icon="check" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<span class="font-label-md text-label-md text-primary font-bold">Business info</span>
</div>
<div class="relative z-10 flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xs ring-4 ring-white">
<span class="material-symbols-outlined text-sm" data-icon="check" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<span class="font-label-md text-label-md text-primary font-bold">Bank Account</span>
</div>
<div class="relative z-10 flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xs ring-4 ring-white">
<span class="material-symbols-outlined text-sm" data-icon="check" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<span class="font-label-md text-label-md text-primary font-bold">Address</span>
</div>
<div class="relative z-10 flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold ring-4 ring-primary-fixed shadow-lg">4</div>
<span class="font-label-md text-label-md text-primary font-bold">KYC Upload</span>
</div>
<div class="relative z-10 flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-white border-2 border-slate-200 text-slate-400 flex items-center justify-center font-bold text-xs">5</div>
<span class="font-label-md text-label-md text-slate-400">Review</span>
</div>
</div>
</div>
</div>
</header>
<main class="max-w-4xl mx-auto px-page-padding py-12">
<!-- Header Content -->
<div class="mb-10">
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Verify Your Business Identity</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">Please upload the required documents to comply with financial regulations and secure your merchant account. Ensure all photos are clear and legible.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 gap-8">
<!-- KYC Section: KTP -->
<section class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
<div class="p-card-padding border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-primary-fixed flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-primary" data-icon="badge">badge</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md">Identity Card (KTP)</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Valid national ID card of the business owner or director.</p>
</div>
</div>
<div class="flex flex-col items-start md:items-end gap-1">
<span class="font-label-md text-label-md text-slate-500 uppercase">Formats: JPG, PNG, PDF</span>
<span class="font-label-md text-label-md text-slate-500 uppercase">Max size: 5MB</span>
</div>
</div>
<div class="p-card-padding">
<div class="upload-dashed h-48 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-surface-container-low group relative overflow-hidden" id="ktp-dropzone">
<input accept=".jpg,.jpeg,.png,.pdf" class="absolute inset-0 opacity-0 cursor-pointer z-10" type="file"/>
<div class="flex flex-col items-center gap-3">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary transition-colors" data-icon="upload_file">upload_file</span>
<div class="text-center">
<p class="font-body-md text-body-md font-bold text-primary">Click to upload or drag and drop</p>
<p class="font-label-md text-label-md text-slate-500">KTP Front View. Ensure name and photo are visible.</p>
</div>
</div>
</div>
<div class="mt-4 flex gap-4 hidden" id="ktp-preview">
<div class="flex items-center gap-3 bg-primary-fixed p-3 rounded-lg w-full">
<span class="material-symbols-outlined text-primary" data-icon="image">image</span>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold truncate">ktp_owner_final.jpg</p>
<p class="text-xs text-on-primary-fixed-variant">1.2 MB • Ready to upload</p>
</div>
<button class="p-1 hover:bg-white rounded-full text-danger">
<span class="material-symbols-outlined" data-icon="close">close</span>
</button>
</div>
</div>
</div>
</section>
<!-- KYC Section: NPWP -->
<section class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
<div class="p-card-padding border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-secondary-fixed flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-secondary" data-icon="account_balance_wallet">account_balance_wallet</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md">Tax ID (NPWP)</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Company or individual tax identification card.</p>
</div>
</div>
<div class="flex flex-col items-start md:items-end gap-1">
<span class="font-label-md text-label-md text-slate-500 uppercase">Formats: JPG, PNG, PDF</span>
<span class="font-label-md text-label-md text-slate-500 uppercase">Max size: 5MB</span>
</div>
</div>
<div class="p-card-padding">
<div class="upload-dashed h-48 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-surface-container-low group relative" id="npwp-dropzone">
<input accept=".jpg,.jpeg,.png,.pdf" class="absolute inset-0 opacity-0 cursor-pointer z-10" type="file"/>
<div class="flex flex-col items-center gap-3">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary transition-colors" data-icon="file_present">file_present</span>
<div class="text-center">
<p class="font-body-md text-body-md font-bold text-primary">Click to upload or drag and drop</p>
<p class="font-label-md text-label-md text-slate-500">Scan or photo of the NPWP card.</p>
</div>
</div>
</div>
</div>
</section>
<!-- KYC Section: Business Photo -->
<section class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
<div class="p-card-padding border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-tertiary-fixed flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-tertiary" data-icon="add_a_photo">add_a_photo</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md">Business Location Photo</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Storefront photo showing business name and signage.</p>
</div>
</div>
<div class="flex flex-col items-start md:items-end gap-1">
<span class="font-label-md text-label-md text-slate-500 uppercase">Formats: JPG, PNG</span>
<span class="font-label-md text-label-md text-slate-500 uppercase">Max size: 10MB</span>
</div>
</div>
<div class="p-card-padding">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="relative group aspect-video rounded-lg overflow-hidden border-2 border-slate-200 hover:border-primary transition-all">
<img class="w-full h-full object-cover" data-alt="A brightly lit, professional modern retail storefront with a glass facade. The interior displays organized wooden shelving with various products. Warm atmospheric lighting illuminates the clean minimalist space, creating a welcoming and reliable corporate aesthetic. High resolution photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAExk-CpPooZnHdabVfhRzdZaMTbsKTyzwlSVgG0SqpxWiYvMKIu8xP03b-rul_7X2ShsBL0iNYXr-exJut1chAb514qjWcpsJvRdVgx3WOWxKt-e-pWyru6m3MrWdd12Bs2cLWvUvbaX9eeUDXWFBjF1cnd4Aq3wUz33rAdpavwi2S9bsN1IKbxFxxyErdIRkKf7cmz4EOCqYr60vKenmhm1c7vdS5ahi8ZaKmYuuQVbbF1s3Chs8Y-d7YKaFJQT9hAN7XI4luiro"/>
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
<button class="bg-white/90 hover:bg-white text-on-surface p-2 rounded-full flex items-center gap-2 text-sm font-bold shadow-lg transform translate-y-2 group-hover:translate-y-0 transition-transform">
<span class="material-symbols-outlined text-base" data-icon="sync">sync</span> Change
</button>
<button class="bg-danger/90 hover:bg-danger text-white p-2 rounded-full shadow-lg transform translate-y-2 group-hover:translate-y-0 transition-transform">
<span class="material-symbols-outlined text-base" data-icon="delete">delete</span>
</button>
</div>
<div class="absolute top-2 left-2">
<span class="bg-success text-white text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider">Validated</span>
</div>
</div>
<div class="upload-dashed aspect-video rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-surface-container-low group relative">
<input accept=".jpg,.jpeg,.png" class="absolute inset-0 opacity-0 cursor-pointer z-10" type="file"/>
<div class="flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-3xl text-slate-400 group-hover:text-primary transition-colors" data-icon="photo_camera">photo_camera</span>
<p class="font-label-md text-label-md text-slate-500 text-center px-4">Upload interior or signage photo</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Warning/Info Block -->
<div class="mt-12 bg-primary-fixed/30 border border-primary/10 rounded-xl p-card-padding flex gap-4">
<span class="material-symbols-outlined text-primary mt-0.5" data-icon="info">info</span>
<div class="flex-1">
<h4 class="font-headline-md text-sm mb-1">Our Review Process</h4>
<p class="font-body-md text-sm text-on-surface-variant">KYC documents are reviewed within 24-48 business hours. You will receive an email notification once your account status is updated. Providing high-quality, un-cropped photos will expedite this process.</p>
</div>
</div>
<!-- Action Footer -->
<div class="mt-12 flex flex-col md:flex-row items-center justify-between gap-6 border-t border-slate-200 pt-10">
<button class="w-full md:w-auto px-8 py-3 rounded-full border-2 border-slate-200 font-bold text-on-surface-variant hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl" data-icon="arrow_back">arrow_back</span>
Previous Step
</button>
<div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
<button class="w-full md:w-auto px-8 py-3 rounded-full bg-slate-200 font-bold text-slate-500 cursor-not-allowed flex items-center justify-center gap-2" disabled="">
Save Draft
</button>
<button class="w-full md:w-auto px-10 py-4 rounded-full bg-primary text-white font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2" onclick="handleSubmit()">
Submit for Review
<span class="material-symbols-outlined text-xl" data-icon="send">send</span>
</button>
</div>
</div>
</main>
<!-- Simple Feedback Modal (Hidden) -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300" id="success-modal">
<div class="bg-white rounded-2xl p-10 max-w-md w-full mx-4 text-center transform scale-95 transition-transform duration-300 shadow-2xl">
<div class="w-20 h-20 bg-success/10 text-success rounded-full flex items-center justify-center mx-auto mb-6">
<span class="material-symbols-outlined text-5xl" data-icon="task_alt" data-weight="fill" style="font-variation-settings: 'FILL' 1;">task_alt</span>
</div>
<h2 class="font-headline-lg text-headline-lg mb-2">Documents Submitted!</h2>
<p class="font-body-lg text-on-surface-variant mb-8">Thank you for providing your KYC details. Our verification team is now reviewing your application.</p>
<button class="w-full py-4 bg-primary text-white rounded-full font-bold shadow-lg shadow-primary/20 hover:opacity-90 transition-all" onclick="closeModal()">
Go to Dashboard
</button>
</div>
</div>
<script>
function handleSubmit() {
const modal = document.getElementById('success-modal');
modal.classList.remove('hidden');
setTimeout(() => {
modal.classList.remove('opacity-0');
modal.children[0].classList.remove('scale-95');
modal.children[0].classList.add('scale-100');
}, 10);
}
function closeModal() {
const modal = document.getElementById('success-modal');
modal.classList.add('opacity-0');
modal.children[0].classList.remove('scale-100');
modal.children[0].classList.add('scale-95');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
}
// Mock interaction for file selection
const dropzones = ['ktp-dropzone', 'npwp-dropzone'];
dropzones.forEach(id => {
const el = document.getElementById(id);
if (el) {
el.addEventListener('click', () => {
const input = el.querySelector('input');
input.click();
});
}
});
</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>