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

517
design/admin_system_audit_logs/code.html Normal file
View File

@ -0,0 +1,517 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Audit Logs | Soundbox Ops</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Plus+Jakarta+Sans:wght@600;700;800&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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"success": "#16A34A",
"on-tertiary-fixed": "#360f00",
"danger": "#DC2626",
"slate-900": "#0F172A",
"on-surface-variant": "#434655",
"slate-100": "#F1F5F9",
"tertiary-container": "#bc4800",
"on-secondary-fixed": "#0b1c30",
"error-container": "#ffdad6",
"outline": "#737686",
"primary-fixed": "#dbe1ff",
"on-tertiary": "#ffffff",
"info": "#0EA5E9",
"on-secondary-fixed-variant": "#38485d",
"surface-container": "#ededf9",
"primary-container": "#2563eb",
"warning": "#F59E0B",
"inverse-on-surface": "#f0f0fb",
"error": "#ba1a1a",
"surface": "#faf8ff",
"slate-700": "#334155",
"inverse-primary": "#b4c5ff",
"on-error": "#ffffff",
"secondary-container": "#d0e1fb",
"tertiary": "#943700",
"surface-container-low": "#f3f3fe",
"on-surface": "#191b23",
"tertiary-fixed": "#ffdbcd",
"slate-200": "#E2E8F0",
"inverse-surface": "#2e3039",
"surface-tint": "#0053db",
"on-error-container": "#93000a",
"tertiary-fixed-dim": "#ffb596",
"on-tertiary-fixed-variant": "#7d2d00",
"on-secondary": "#ffffff",
"background": "#F8FAFC",
"on-background": "#191b23",
"slate-500": "#64748B",
"primary": "#004ac6",
"surface-bright": "#faf8ff",
"primary-fixed-dim": "#b4c5ff",
"on-primary": "#ffffff",
"outline-variant": "#c3c6d7",
"surface-container-high": "#e7e7f3",
"on-primary-fixed": "#00174b",
"surface-dim": "#d9d9e5",
"secondary-fixed-dim": "#b7c8e1",
"on-primary-container": "#eeefff",
"surface-variant": "#e1e2ed",
"surface-container-highest": "#e1e2ed",
"secondary-fixed": "#d3e4fe",
"surface-container-lowest": "#ffffff",
"on-tertiary-container": "#ffede6",
"on-primary-fixed-variant": "#003ea8",
"secondary": "#505f76",
"on-secondary-container": "#54647a"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"topbar-height": "72px",
"row-height": "52px",
"page-padding": "24px",
"card-padding": "20px",
"gutter": "24px"
},
"fontFamily": {
"label-md": ["Inter"],
"body-md": ["Inter"],
"metric-sm": ["Inter"],
"metric-lg": ["Inter"],
"headline-lg": ["Plus Jakarta Sans"],
"display-lg": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"],
"body-lg": ["Inter"],
"mono": ["JetBrains Mono", "monospace"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"headline-md": ["20px", {"lineHeight": "28px", "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;
vertical-align: middle;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.data-table-container { height: calc(100vh - 280px); }
.tab-active { @apply bg-secondary-container text-on-secondary-container font-bold; }
</style>
</head>
<body class="bg-background text-on-background font-body-md selection:bg-primary-container selection:text-white">
<!-- Sidebar Navigation -->
<aside class="flex flex-col fixed left-0 top-0 h-full p-4 gap-2 bg-white border-r border-slate-200 w-64 z-50">
<div class="flex items-center gap-3 px-2 py-4 mb-4">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center">
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">shield</span>
</div>
<div>
<h1 class="font-headline-md text-headline-md text-primary leading-tight">Soundbox Admin</h1>
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider">Fintech Ops Suite</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-label-md">Reconciliation</span>
</a>
<!-- ACTIVE TAB: Audit Logs -->
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-xl font-bold transition-all scale-98" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">security</span>
<span class="font-label-md">Audit Logs</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">payments</span>
<span class="font-label-md">Fee Management</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">receipt_long</span>
<span class="font-label-md">Settlements</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">router</span>
<span class="font-label-md">Device Health</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-secondary hover:bg-slate-100 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">contact_support</span>
<span class="font-label-md">Support</span>
</a>
</nav>
<button class="mb-4 w-full bg-primary text-white font-label-md py-3 rounded-xl hover:shadow-lg transition-all active:scale-95">
Generate Report
</button>
<div class="border-t border-slate-100 pt-4">
<a class="flex items-center gap-3 px-4 py-3 text-danger hover:bg-error-container/30 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-label-md">Logout</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-64 min-h-screen flex flex-col">
<!-- Top Bar -->
<header class="flex justify-between items-center h-[72px] px-page-padding w-full sticky top-0 z-40 bg-white border-b border-slate-200">
<div class="flex items-center gap-2">
<h2 class="font-headline-md text-headline-md font-bold text-primary">Audit Logs</h2>
<span class="text-slate-300 mx-2">/</span>
<span class="text-slate-500 font-label-md">System Security</span>
</div>
<div class="flex items-center gap-6">
<!-- Global Search -->
<div class="relative w-80">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
<input class="w-full bg-slate-50 border-none rounded-lg py-2 pl-10 pr-4 text-body-md focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400" placeholder="Search by Entity ID, User, or IP..." type="text"/>
</div>
<div class="flex items-center gap-3">
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:bg-slate-100 rounded-full transition-colors relative">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-danger rounded-full border-2 border-white"></span>
</button>
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:bg-slate-100 rounded-full transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
<img alt="Administrator Avatar" class="w-9 h-9 rounded-full bg-slate-100 border border-slate-200" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIsOVKgRqgiod6bGWxQyDGQUWWzDfFxNrLh3RKcG7NMtzDN9wU5PZSQtPTzGuUueyYqzCkURd2rWz3yNelalYWw5DA_fmvE38P-w2mcjIPVRICWN-mM-vH-PEVpP64o4_xV42oXwhl2YPM_gPVfMAxgpNjhU2uIQg-5DcL8wlTOm-ZBeS9Fb4aDfXvrY-DsqRpT297-CzSthoRbrVd5_Lri6fxO8z7OnRzccmPp-AduLXLSy31_zrEkT7gb7Fe62Yn7lM9-04_IhE"/>
</div>
</div>
</header>
<!-- Operational Canvas -->
<div class="p-page-padding space-y-6 flex-1">
<!-- Filter Bar -->
<section class="flex flex-wrap items-center gap-4 bg-white p-4 rounded-xl border border-slate-200">
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-200">
<span class="font-label-md text-slate-500">Action Type:</span>
<select class="bg-transparent border-none p-0 text-label-md font-bold text-primary focus:ring-0">
<option>All Actions</option>
<option>Create</option>
<option>Update</option>
<option>Delete</option>
<option>Login</option>
</select>
</div>
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-200">
<span class="font-label-md text-slate-500">User Role:</span>
<select class="bg-transparent border-none p-0 text-label-md font-bold text-primary focus:ring-0">
<option>All Roles</option>
<option>Super Admin</option>
<option>Operator</option>
<option>Support</option>
</select>
</div>
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-200">
<span class="material-symbols-outlined text-slate-400 text-sm">calendar_today</span>
<span class="font-label-md text-slate-500">Date Range:</span>
<button class="text-label-md font-bold text-primary">Last 24 Hours</button>
</div>
<div class="flex-1"></div>
<button class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 hover:bg-slate-50 rounded-lg text-label-md font-medium transition-colors">
<span class="material-symbols-outlined text-sm">filter_list</span>
More Filters
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-label-md font-medium hover:bg-black transition-colors">
<span class="material-symbols-outlined text-sm">download</span>
Export CSV
</button>
</section>
<!-- Audit Table -->
<section class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
<div class="overflow-x-auto data-table-container scrollbar-hide">
<table class="w-full text-left border-collapse">
<thead class="sticky top-0 z-10 bg-white">
<tr class="border-b border-slate-200">
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Timestamp</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">User &amp; Role</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Action</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Resource ID</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">IP Address</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider text-right">Payload</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-3.5 whitespace-nowrap">
<div class="flex flex-col">
<span class="font-metric-sm text-slate-900">Oct 24, 2023</span>
<span class="text-xs text-slate-500">14:22:45.002</span>
</div>
</td>
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User" class="w-8 h-8 rounded-full bg-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAT7G2Zjmxb5coADrflGFZIwWN9riKJ4FfJYMicnfhYqCxMVqPLGf8GFKi_MTLd9WjPM6YnURSxDjvOFhF2wmnEy3skSxmwBBHRkivMuzFYJFuAy39E0sBKirLTbVOuXQ0Gx5xYQTZVkWs_shSkuW5StZT8zPCpRxQKlKtxAves_Peneg4pyn6KornQCenMinpb0fiD1j2ZqFUNAGoBN64DK9txaoo-w_I4lH5XJ-VfUbwGJ8sPyzXh5qatt6JW4OsbzKIzRmHNEPM"/>
<div class="flex flex-col">
<span class="font-medium text-slate-900">Felix Chen</span>
<span class="text-[10px] bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded-full w-fit font-bold uppercase">Super Admin</span>
</div>
</div>
</td>
<td class="px-6 py-3.5">
<span class="text-body-md font-medium text-slate-900">Updated Merchant Fee</span>
</td>
<td class="px-6 py-3.5">
<code class="font-mono text-xs text-primary bg-primary-fixed/30 px-2 py-1 rounded">MID-88219-X</code>
</td>
<td class="px-6 py-3.5 whitespace-nowrap text-slate-500 text-xs">
192.168.1.104
</td>
<td class="px-6 py-3.5">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-success/10 text-success">
<span class="w-1.5 h-1.5 rounded-full bg-success"></span> Success
</span>
</td>
<td class="px-6 py-3.5 text-right">
<button class="text-primary hover:underline font-label-md" onclick="toggleDrawer('payload-1')">View JSON</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex flex-col">
<span class="font-metric-sm text-slate-900">Oct 24, 2023</span>
<span class="text-xs text-slate-500">13:58:12.881</span>
</div>
</td>
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User" class="w-8 h-8 rounded-full bg-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXEfGIgENxAXyTqeCXABKrwKVvENV5YlyIBP8Q8LlYtFLS0jDj84rLwBSnQKtY-aKsAKyUlF-552T25AW-zbUuFI_rMTIm1BKyF5d3m0uMAJnFjPjsMWlu62fICZMjAbFi-ZzOJ58zjkzZCT4FySAr71nO3OtBMR_HHD0nVENVi5chys8qthCMch7ORsjd99BeGVR2xJOnVbReJMN-cFx66w3GHxJVj0Ym14aLofAbNI5VxgVmin7Hn3V7jSVVFdjF8iztn-2fpWs"/>
<div class="flex flex-col">
<span class="font-medium text-slate-900">Sarah Miller</span>
<span class="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded-full w-fit font-bold uppercase">Operator</span>
</div>
</div>
</td>
<td class="px-6 py-3.5">
<span class="text-body-md font-medium text-slate-900">Failed Login Attempt</span>
</td>
<td class="px-6 py-3.5 text-slate-400 text-xs">—</td>
<td class="px-6 py-3.5 whitespace-nowrap text-slate-500 text-xs">
103.24.11.92
</td>
<td class="px-6 py-3.5">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-danger/10 text-danger">
<span class="w-1.5 h-1.5 rounded-full bg-danger"></span> Failed
</span>
</td>
<td class="px-6 py-3.5 text-right">
<button class="text-primary hover:underline font-label-md">View JSON</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex flex-col">
<span class="font-metric-sm text-slate-900">Oct 24, 2023</span>
<span class="text-xs text-slate-500">12:10:04.230</span>
</div>
</td>
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User" class="w-8 h-8 rounded-full bg-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmTGvw3lGcuiC_8sY1kMBG7O5iWz4Xg0Ppx8HP_T0RxlCvnScnjZphmuaDaURjnrJ52FXnR8pRTrLh1OE7cOoiO-p97YQRQ6coI8rAKWBCe7QZxj3ARR9rjk3NhaUeaGAMI7l_nGKfYW6XmGIwy5sALL1zamrSOy2XV2lpyCkb11ge3FRAVrz-EcDqPHTfohniT2UhUkMnkrXQyZ3YI6F7gP3FQSTAYkeaw-nTTMx7XtMBrSB0j_YkS_lf4qsFj2rgwlvMbo8-yLs"/>
<div class="flex flex-col">
<span class="font-medium text-slate-900">Jordan Blake</span>
<span class="text-[10px] bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded-full w-fit font-bold uppercase">Super Admin</span>
</div>
</div>
</td>
<td class="px-6 py-3.5">
<span class="text-body-md font-medium text-slate-900">Deleted API Key</span>
</td>
<td class="px-6 py-3.5">
<code class="font-mono text-xs text-primary bg-primary-fixed/30 px-2 py-1 rounded">KEY-TEST-992</code>
</td>
<td class="px-6 py-3.5 whitespace-nowrap text-slate-500 text-xs">
45.12.88.21
</td>
<td class="px-6 py-3.5">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-success/10 text-success">
<span class="w-1.5 h-1.5 rounded-full bg-success"></span> Success
</span>
</td>
<td class="px-6 py-3.5 text-right">
<button class="text-primary hover:underline font-label-md">View JSON</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex flex-col">
<span class="font-metric-sm text-slate-900">Oct 24, 2023</span>
<span class="text-xs text-slate-500">11:45:30.121</span>
</div>
</td>
<td class="px-6 py-3.5 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User" class="w-8 h-8 rounded-full bg-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqg6S7qtOgdjYo8RqItZB-EV13d0Zyjsfif3UP_wBYeKrWDxjA3erAHPYKD_VJEeoyFyATqK7ww5Polle75Acq2HSQslPDgUbhMz5sKxLj9_ZK1srhVhWDMTo9bozujSsdbUb7tUtjNy92rYTBKUwVuif-i0JbzX8n0S20eMqNFlz3EqwqWyVFV1rbsDwh82bZgdbRWM9Hi00MAtMxAxITs07u5ZhkXriAnn382ym8pJZyRlUXZl657IaYdlN4j9TMuqp_cloiIow"/>
<div class="flex flex-col">
<span class="font-medium text-slate-900">System Core</span>
<span class="text-[10px] bg-orange-50 text-orange-700 px-1.5 py-0.5 rounded-full w-fit font-bold uppercase">Automated</span>
</div>
</div>
</td>
<td class="px-6 py-3.5">
<span class="text-body-md font-medium text-slate-900">Initiated Daily Settlement</span>
</td>
<td class="px-6 py-3.5">
<code class="font-mono text-xs text-primary bg-primary-fixed/30 px-2 py-1 rounded">SETTLE-20231024</code>
</td>
<td class="px-6 py-3.5 whitespace-nowrap text-slate-500 text-xs">
Internal
</td>
<td class="px-6 py-3.5">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-warning/10 text-warning">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span> Pending
</span>
</td>
<td class="px-6 py-3.5 text-right">
<button class="text-primary hover:underline font-label-md">View JSON</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex items-center justify-between px-6 py-4 bg-white border-t border-slate-200">
<span class="text-label-md text-slate-500">Showing 1 to 20 of 1,248 entries</span>
<div class="flex gap-2">
<button class="p-2 border border-slate-200 rounded-lg text-slate-400 hover:bg-slate-50 disabled:opacity-50" disabled="">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="px-4 py-2 bg-primary text-white font-label-md rounded-lg">1</button>
<button class="px-4 py-2 text-slate-600 font-label-md hover:bg-slate-50 rounded-lg">2</button>
<button class="px-4 py-2 text-slate-600 font-label-md hover:bg-slate-50 rounded-lg">3</button>
<button class="p-2 border border-slate-200 rounded-lg text-slate-600 hover:bg-slate-50">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</section>
</div>
</main>
<!-- Detail Drawer (Hidden by Default) -->
<div class="fixed inset-0 z-50 invisible" id="payload-drawer">
<div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm opacity-0 transition-opacity duration-300" id="drawer-overlay"></div>
<div class="absolute right-0 top-0 h-full w-[500px] bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col" id="drawer-content">
<div class="p-6 border-b border-slate-200 flex justify-between items-center bg-slate-50">
<div>
<h3 class="font-headline-md text-slate-900">Audit Detail Payload</h3>
<p class="text-xs text-slate-500 font-mono">ID: 550e8400-e29b-41d4-a716-446655440000</p>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-200 text-slate-500 transition-colors" onclick="toggleDrawer()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="p-6 flex-1 overflow-y-auto space-y-6">
<div class="space-y-3">
<h4 class="font-label-md text-slate-400 uppercase tracking-wider">Operational Summary</h4>
<div class="grid grid-cols-2 gap-4">
<div class="p-3 bg-slate-50 rounded-lg border border-slate-200">
<span class="text-xs text-slate-500">Method</span>
<p class="font-bold text-primary">PATCH</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg border border-slate-200">
<span class="text-xs text-slate-500">Source Agent</span>
<p class="font-bold text-primary">Web-Admin/2.4.1</p>
</div>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<h4 class="font-label-md text-slate-400 uppercase tracking-wider">Raw JSON Payload</h4>
<button class="flex items-center gap-1.5 text-primary hover:text-primary-container text-xs font-bold transition-colors">
<span class="material-symbols-outlined text-sm">content_copy</span>
Copy JSON
</button>
</div>
<div class="bg-slate-900 rounded-xl p-6 overflow-hidden relative group">
<pre class="font-mono text-[13px] text-green-400 overflow-x-auto scrollbar-hide">{
"action": "UPDATE_MERCHANT_FEE",
"metadata": {
"merchant_id": "MID-88219-X",
"initiated_by": "f.chen@soundbox.ops",
"ip_address": "192.168.1.104"
},
"changes": {
"transaction_fee_pct": {
"old": 1.25,
"new": 1.10
},
"fixed_charge": {
"old": 0.50,
"new": 0.50
}
},
"timestamp": "2023-10-24T14:22:45.002Z",
"auth_token_sig": "sha256:88a7b...12ff"
}
</pre>
</div>
</div>
<div class="p-4 bg-info/10 rounded-xl border border-info/20 flex gap-3">
<span class="material-symbols-outlined text-info">info</span>
<p class="text-xs text-on-secondary-container/80 leading-relaxed">
This action was performed via the Management Dashboard and required two-factor authentication. Verified by security group "SG-FIN-ADMIN".
</p>
</div>
</div>
<div class="p-6 border-t border-slate-200 bg-white">
<button class="w-full py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-black transition-all" onclick="toggleDrawer()">
Close Inspection
</button>
</div>
</div>
</div>
<script>
function toggleDrawer() {
const drawer = document.getElementById('payload-drawer');
const overlay = document.getElementById('drawer-overlay');
const content = document.getElementById('drawer-content');
if (drawer.classList.contains('invisible')) {
drawer.classList.remove('invisible');
setTimeout(() => {
overlay.classList.replace('opacity-0', 'opacity-100');
content.classList.replace('translate-x-full', 'translate-x-0');
}, 10);
} else {
overlay.classList.replace('opacity-100', 'opacity-0');
content.classList.replace('translate-x-0', 'translate-x-full');
setTimeout(() => {
drawer.classList.add('invisible');
}, 300);
}
}
// Close on overlay click
document.getElementById('drawer-overlay').addEventListener('click', toggleDrawer);
// Escape key to close
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !document.getElementById('payload-drawer').classList.contains('invisible')) {
toggleDrawer();
}
});
</script>
</body></html>