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

448
design/admin_application_review_detail/code.html Normal file
View File

@ -0,0 +1,448 @@
<!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&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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

BIN
design/admin_application_review_detail/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 KiB