chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
566
screen_design/zappcare_api_webhook_logs/code.html
Normal file
566
screen_design/zappcare_api_webhook_logs/code.html
Normal file
@ -0,0 +1,566 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZappCare Super Admin - API & Webhook Logs</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;700;800;900&family=Manrope:wght@400;500;600;700;800&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": {
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-primary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#865219",
|
||||
"on-surface": "#191c1e",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary": "#0c6780",
|
||||
"background": "#f7f9fc",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"secondary": "#35637d",
|
||||
"tertiary-container": "#fbb674",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-tint": "#0c6780",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"outline": "#6f787d",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"surface": "#f7f9fc",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary-container": "#36647e",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"primary-container": "#87ceeb",
|
||||
"surface-variant": "#e0e3e5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.tonal-shift-bg { transition: background-color 0.2s ease; }
|
||||
.no-border { border: none !important; }
|
||||
.glass-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface flex min-h-screen">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl flex flex-col p-4 space-y-2 z-50">
|
||||
<div class="mb-8 px-2 flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-container flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-white" data-icon="terminal">terminal</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-xs text-slate-500 font-medium">System Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-1">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dns">dns</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Infrastructure</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Monitoring</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Agents</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitor_heart">monitor_heart</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Health</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 mt-4 space-y-1">
|
||||
<button class="w-full flex items-center justify-center space-x-2 py-3 px-4 bg-gradient-to-r from-primary to-primary-container text-white rounded-xl font-bold shadow-sm hover:opacity-90 transition-opacity mb-4">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
||||
<span>New Tenant</span>
|
||||
</button>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span class="font-['Manrope'] font-semibold tracking-tight">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Shell -->
|
||||
<main class="flex-grow ml-64 min-h-screen flex flex-col relative overflow-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 right-0 left-64 h-16 z-40 bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between px-8 w-full no-border">
|
||||
<div class="flex items-center space-x-8">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="search">search</span>
|
||||
</span>
|
||||
<input class="bg-surface-container-low border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary-container w-64 transition-all" placeholder="Search logs..." type="text"/>
|
||||
</div>
|
||||
<nav class="flex items-center space-x-6">
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Dashboard</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Metrics</a>
|
||||
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium" href="#">Reports</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2 px-3 py-1.5 bg-green-50 text-green-700 rounded-full text-xs font-bold">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||||
<span>System Status: Healthy</span>
|
||||
</div>
|
||||
<button class="text-slate-500 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<div class="flex items-center space-x-2 pl-2">
|
||||
<img class="w-8 h-8 rounded-full bg-slate-200" data-alt="close-up portrait of a professional male software engineer with short hair and a clean-shaven face in soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqvmSWuNgKbP4WWHsBGFEawS_HfcmHEFLtliAVOuls_2c_qG_gq-f8ZX6BfPgTePT13OzvDC1LOSRtteHeBv9Mn7wXsTWmvEeYZX4j8Zhe1CFE4KXtAGcZWnwFK-gTDj_TbXaOw7-xnudSKJ8uriulM5wBicLMusFdgfSli-ujbWBSrVxPKzC-cpDlqROnTpDX9UNhzUlMtJnhFJbv82HOztCTC6MlOAdaYjjV31CmLHtXydAJsK72HSvf496HYHEKOqqfyNcNT8M"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="mt-16 p-8 flex-grow">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center text-xs text-slate-400 space-x-2 mb-2 font-medium">
|
||||
<span>Admin</span>
|
||||
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span>Systems</span>
|
||||
<span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-primary font-bold">API & Webhook Logs</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h2 class="text-4xl font-black text-on-surface font-headline tracking-tighter">Live Traffic</h2>
|
||||
<p class="text-slate-500 mt-1 max-w-md">Real-time monitoring of all incoming and outgoing ZappCare API events and third-party webhook payloads.</p>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button class="flex items-center space-x-2 px-4 py-2 bg-surface-container-low rounded-xl text-sm font-semibold text-slate-700 hover:bg-surface-container hover:shadow-sm transition-all">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="download">download</span>
|
||||
<span>Export CSV</span>
|
||||
</button>
|
||||
<button class="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-xl text-sm font-semibold hover:opacity-90 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="refresh">refresh</span>
|
||||
<span>Live Update</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Grid (Tonal Architecture) -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Total Requests (24h)</p>
|
||||
<p class="text-3xl font-black font-headline text-on-surface">1,204,582</p>
|
||||
<div class="mt-2 flex items-center text-green-600 text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
|
||||
<span class="ml-1">+12.4% vs yesterday</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Avg. Latency</p>
|
||||
<p class="text-3xl font-black font-headline text-on-surface">142ms</p>
|
||||
<div class="mt-2 flex items-center text-primary text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="speed">speed</span>
|
||||
<span class="ml-1">Stable within SLA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Error Rate</p>
|
||||
<p class="text-3xl font-black font-headline text-error">0.04%</p>
|
||||
<div class="mt-2 flex items-center text-error text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="error_outline">error_outline</span>
|
||||
<span class="ml-1">42 Failed today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border-2 border-primary-container/20">
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Active Webhooks</p>
|
||||
<p class="text-3xl font-black font-headline text-on-primary-container">1,842</p>
|
||||
<div class="mt-2 flex items-center text-on-primary-container text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="hub">hub</span>
|
||||
<span class="ml-1">Across 420 Tenants</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filters Bar -->
|
||||
<div class="bg-surface-container-low p-4 rounded-full flex items-center space-x-6 mb-6">
|
||||
<div class="flex items-center space-x-2 text-slate-500">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="filter_list">filter_list</span>
|
||||
<span class="text-xs font-bold uppercase tracking-tight">Quick Filters:</span>
|
||||
</div>
|
||||
<div class="flex-grow flex space-x-3">
|
||||
<select class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 px-4 focus:ring-primary/30 min-w-[140px]">
|
||||
<option>All Providers</option>
|
||||
<option>Stripe</option>
|
||||
<option>Twilio</option>
|
||||
<option>SendGrid</option>
|
||||
<option>WhatsApp API</option>
|
||||
</select>
|
||||
<select class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 px-4 focus:ring-primary/30 min-w-[140px]">
|
||||
<option>All Status</option>
|
||||
<option>Success (200)</option>
|
||||
<option>Bad Request (400)</option>
|
||||
<option>Unauthorized (401)</option>
|
||||
<option>Server Error (500)</option>
|
||||
</select>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400 text-sm" data-icon="calendar_today">calendar_today</span>
|
||||
<input class="bg-surface-container-lowest border-none rounded-xl text-sm font-medium py-2 pl-10 pr-4 focus:ring-primary/30 w-64" type="text" value="Oct 24, 2023 - Oct 25, 2023"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="settings_ethernet">settings_ethernet</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="view_agenda">view_agenda</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Table -->
|
||||
<div class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden mb-8">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/50 border-b border-surface-container">
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Event Type</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Provider ID</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Payload Source</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500 text-center">Status</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500">Timestamp</th>
|
||||
<th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="webhook">webhook</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">payment.succeeded</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /v1/webhooks/stripe</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">evt_3N8xU6LpG...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Stripe Global</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
200 OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:32:01</p>
|
||||
<p class="text-[10px] text-slate-400">2 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-orange-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="api">api</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">patient.record_create</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">PUT /api/v2/records</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">req_881vPx92...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">ZappCare Internal</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-red-500 mr-1.5"></span>
|
||||
401 Unauth
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:30:15</p>
|
||||
<p class="text-[10px] text-slate-400">4 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center text-purple-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="sms">sms</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">message.delivered</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /hooks/twilio/status</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">SMx9900223...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Twilio Hub</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
204 Empty
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:28:44</p>
|
||||
<p class="text-[10px] text-slate-400">6 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-container/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="webhook">webhook</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-on-surface">customer.subscription.deleted</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono">POST /v1/webhooks/stripe</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-xs font-mono text-slate-600 bg-surface-container p-1 rounded">evt_4K2zT1M...</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs font-semibold text-slate-700">Stripe Global</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-1.5"></span>
|
||||
200 OK
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-medium text-slate-600">2023-10-25 14:25:12</p>
|
||||
<p class="text-[10px] text-slate-400">9 minutes ago</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-full transition-all opacity-0 group-hover:opacity-100">
|
||||
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-4 bg-surface-container-low/30 border-t border-slate-100 flex items-center justify-between">
|
||||
<p class="text-xs text-slate-500 font-medium tracking-tight">Showing 1-15 of 1,242 entries today</p>
|
||||
<div class="flex space-x-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white font-bold text-xs shadow-md shadow-primary/20">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all font-bold text-xs">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all font-bold text-xs">3</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Preview Section (Asymmetric Detail Cards) -->
|
||||
<div class="grid grid-cols-12 gap-6 pb-20">
|
||||
<div class="col-span-12 md:col-span-8 bg-surface-container-low rounded-full p-8 relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-colors"></div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-xl font-bold font-headline mb-6 flex items-center">
|
||||
<span class="material-symbols-outlined mr-2 text-primary" data-icon="code">code</span>
|
||||
Last Failed Payload Breakdown
|
||||
</h3>
|
||||
<div class="bg-slate-900 rounded-xl p-6 font-mono text-xs text-blue-300 leading-relaxed overflow-x-auto shadow-2xl">
|
||||
<div class="flex space-x-4 mb-2 opacity-50">
|
||||
<span>1</span>
|
||||
<span class="text-pink-400">{</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>2</span>
|
||||
<span> "error": <span class="text-orange-300">"unauthorized_access"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>3</span>
|
||||
<span> "request_id": <span class="text-orange-300">"req_881vPx92"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>4</span>
|
||||
<span> "timestamp": <span class="text-orange-300">"2023-10-25T14:30:15Z"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>5</span>
|
||||
<span> "context": {</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>6</span>
|
||||
<span> "endpoint": <span class="text-orange-300">"/api/v2/records"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>7</span>
|
||||
<span> "method": <span class="text-orange-300">"PUT"</span>,</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>8</span>
|
||||
<span> "ip_address": <span class="text-orange-300">"42.112.9.22"</span></span>
|
||||
</div>
|
||||
<div class="flex space-x-4 mb-2">
|
||||
<span>9</span>
|
||||
<span> }</span>
|
||||
</div>
|
||||
<div class="flex space-x-4 opacity-50">
|
||||
<span>10</span>
|
||||
<span class="text-pink-400">}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 flex flex-col space-y-6">
|
||||
<div class="bg-gradient-to-br from-[#0c6780] to-[#005870] rounded-full p-8 text-white relative overflow-hidden flex-grow shadow-lg">
|
||||
<div class="absolute -bottom-6 -right-6 opacity-20 transform rotate-12">
|
||||
<span class="material-symbols-outlined text-9xl" data-icon="verified_user">verified_user</span>
|
||||
</div>
|
||||
<h4 class="text-lg font-bold font-headline mb-2">Audit Status</h4>
|
||||
<p class="text-sm opacity-80 mb-6">All system logs are cryptographically signed and archived in cold storage for 12 months.</p>
|
||||
<button class="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full text-xs font-bold transition-all border border-white/20">
|
||||
Download Compliance Bundle
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white rounded-full p-6 shadow-sm border border-slate-100">
|
||||
<h4 class="text-sm font-bold font-headline text-slate-800 mb-4 flex items-center">
|
||||
<span class="material-symbols-outlined text-sm mr-2 text-primary" data-icon="cloud_done">cloud_done</span>
|
||||
Endpoints Health
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Stripe API</span>
|
||||
<span class="text-[10px] font-bold text-green-600">99.98%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-green-500 h-full w-[99.9%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Internal Core</span>
|
||||
<span class="text-[10px] font-bold text-green-600">100%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-green-500 h-full w-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-medium">Patient DB Proxy</span>
|
||||
<span class="text-[10px] font-bold text-orange-500">94.2%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-orange-500 h-full w-[94.2%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Status Bar -->
|
||||
<div class="fixed bottom-6 right-8 left-[calc(16rem+2rem)] flex justify-between items-center glass-blur bg-white/70 px-6 py-3 rounded-full border border-white/50 shadow-xl z-30">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
<span class="text-[10px] font-bold uppercase text-slate-500">Node Cluster Alpha: Active</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-200"></div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400" data-icon="database">database</span>
|
||||
<span class="text-[10px] font-bold uppercase text-slate-500">DB Replication Lag: 4ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="text-[10px] font-bold text-primary flex items-center">
|
||||
<span class="material-symbols-outlined text-xs mr-1" data-icon="update">update</span>
|
||||
Syncing in 12s
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/30">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="terminal" style="font-variation-settings: 'FILL' 1;">terminal</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user