526 lines
26 KiB
HTML
526 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<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&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<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 & 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>
|
|
<!-- 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> |