421 lines
24 KiB
HTML
421 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Webhook Logs & Activity Monitor</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400&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": {
|
|
"surface": "#f3fcef",
|
|
"background": "#f3fcef",
|
|
"text-primary": "#1A1C1E",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-container": "#006f64",
|
|
"tertiary": "#93492e",
|
|
"status-success": "#25D366",
|
|
"surface-card": "#FFFFFF",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"primary": "#006d2f",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"surface-container-low": "#edf6e9",
|
|
"status-warning": "#F59E0B",
|
|
"surface-variant": "#dce5d8",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container": "#e7f1e4",
|
|
"primary-fixed-dim": "#3de273",
|
|
"on-primary-fixed": "#002109",
|
|
"status-info": "#3B82F6",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"surface-dim": "#d3ddd0",
|
|
"surface-container-high": "#e2ebde",
|
|
"status-error": "#EF4444",
|
|
"border-subtle": "#E2E8F0",
|
|
"primary-container": "#25d366",
|
|
"error-container": "#ffdad6",
|
|
"surface-tint": "#006d2f",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-tertiary-container": "#78351b",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"on-background": "#151e16",
|
|
"surface-bright": "#f3fcef",
|
|
"error": "#ba1a1a",
|
|
"secondary": "#006b5f",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-container": "#ffa07e",
|
|
"on-error-container": "#93000a",
|
|
"background-main": "#F8F9FA",
|
|
"on-surface": "#151e16",
|
|
"inverse-primary": "#3de273",
|
|
"inverse-surface": "#2a332a",
|
|
"on-error": "#ffffff",
|
|
"outline": "#6c7b6b",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"text-secondary": "#64748B",
|
|
"on-primary-container": "#005523",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"outline-variant": "#bbcbb9",
|
|
"surface-container-highest": "#dce5d8",
|
|
"primary-fixed": "#66ff8e",
|
|
"secondary-container": "#8cf1e1",
|
|
"on-secondary-fixed": "#00201c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sidebar-width": "260px",
|
|
"toolbar-height": "64px",
|
|
"gutter": "24px",
|
|
"container-margin": "32px",
|
|
"base": "8px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"mono-code": ["JetBrains Mono"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-caps": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"body-md": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
background-color: #f3fcef;
|
|
}
|
|
.payload-scrollbar::-webkit-scrollbar { width: 6px; }
|
|
.payload-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.payload-scrollbar::-webkit-scrollbar-thumb { background: #dce5d8; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="font-body-md text-on-background">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest shadow-sm flex flex-col py-6 px-4 z-50">
|
|
<div class="mb-10 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Admin Console</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="font-body-md">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
|
<span class="font-body-md">Conversations</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
|
<span class="font-body-md">Contacts</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
<span class="font-body-md">Templates</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-container-low text-primary font-bold" href="#">
|
|
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
|
<span class="font-body-md">Webhooks</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
|
<span class="font-body-md">Analytics</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-body-md">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-6 border-t border-surface-variant space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
<span class="font-body-md">Help Center</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="font-body-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter z-40">
|
|
<div class="flex items-center gap-6">
|
|
<h2 class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</h2>
|
|
<div class="relative w-64">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
|
<input class="w-full bg-surface-container-low border-none rounded-full py-1.5 pl-10 pr-4 text-body-sm focus:ring-1 focus:ring-primary" placeholder="Search logs..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all">notifications</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all">settings</button>
|
|
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border border-surface-variant">
|
|
<img alt="Admin Avatar" class="h-full w-full object-cover" data-alt="A professional close-up portrait of a tech executive in a brightly lit, modern office environment. The subject is a male with a warm, confident expression. The lighting is soft and natural, emphasizing a clean, corporate light-mode aesthetic. High-quality digital photography style with a shallow depth of field, highlighting the person against a soft-focus background of minimalist office architecture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAsJ5W6DHarWIMuT2aRvfxJ-W1V6nrxi69aEnLXiRAXBallSf4nClHfd3IkdnJIEC74DoRdzi0qBra-C1QBbKjONLQ_p41IZs07OyHqxT3Y4DP7NEws7ih1NuqxnfTMsBDBwPdQ1kSAVKMTR5qUgdoNBCANnw2Y1NuAkEP1TEXFtRQoZ3mMHyt61Fdrorxnc1RQZVjiTeoQh07wz381wRpU2mEcFehyEBwlgl_NNNXBExSiHW_uAweJcGkwQ8y93WZqmUesLzqiszM"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="ml-[260px] pt-[64px] min-h-screen p-container-margin bg-background">
|
|
<!-- Dashboard Header & Stats -->
|
|
<div class="mb-8 flex justify-between items-end">
|
|
<div>
|
|
<h3 class="font-display-lg text-display-lg text-on-surface mb-2">Webhook Logs</h3>
|
|
<p class="text-on-surface-variant font-body-md">Real-time monitoring of incoming and outgoing events.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-variant transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
|
<span class="font-label-caps text-label-caps">Filter Events</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded-lg hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
<span class="font-label-caps text-label-caps">Export Logs</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Grid for Stats -->
|
|
<div class="grid grid-cols-12 gap-6 mb-8">
|
|
<!-- Success Rate Card -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">SUCCESS RATE</span>
|
|
<span class="material-symbols-outlined text-status-success">check_circle</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-display-lg text-display-lg text-on-surface">99.8%</span>
|
|
<span class="text-status-success text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-[16px]">arrow_upward</span>
|
|
0.2%
|
|
</span>
|
|
</div>
|
|
<div class="mt-4 h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-status-success" style="width: 99.8%"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Average Latency Card -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">AVG. RESPONSE TIME</span>
|
|
<span class="material-symbols-outlined text-status-info">speed</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-display-lg text-display-lg text-on-surface">142ms</span>
|
|
<span class="text-status-success text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
|
|
12ms
|
|
</span>
|
|
</div>
|
|
<div class="mt-4 h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-status-info" style="width: 65%"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Total Events Card -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">TOTAL EVENTS (24H)</span>
|
|
<span class="material-symbols-outlined text-on-tertiary-container">history</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-display-lg text-display-lg text-on-surface">1,248,302</span>
|
|
</div>
|
|
<p class="mt-4 text-on-surface-variant text-body-sm">Peak load: 4.2k req/sec</p>
|
|
</div>
|
|
</div>
|
|
<!-- Logs Table and JSON Viewer Container -->
|
|
<div class="flex gap-6 items-start">
|
|
<!-- Webhook Logs List -->
|
|
<div class="flex-1 bg-surface-container-lowest rounded-xl shadow-sm border border-surface-variant overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-surface-variant flex justify-between items-center bg-surface-container-low/30">
|
|
<span class="font-title-sm text-title-sm text-on-surface">Activity Monitor</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="h-2 w-2 rounded-full bg-status-success animate-pulse"></span>
|
|
<span class="font-label-caps text-label-caps text-status-success">LIVE UPDATING</span>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-surface-container-low border-b border-surface-variant">
|
|
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">TIMESTAMP</th>
|
|
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">EVENT TYPE</th>
|
|
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
|
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">LATENCY</th>
|
|
<th class="px-6 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-surface-variant">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:45.102</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">128ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group bg-surface-container-low/20">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:44.850</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.delivered</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">92ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: Error Example -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:42.311</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.read</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-error/10 text-status-error">400 Error</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">215ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:40.004</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">154ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 5 -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:38.992</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">133ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 6 -->
|
|
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:37.450</td>
|
|
<td class="px-6 py-4">
|
|
<span class="font-mono-code text-mono-code text-primary font-bold">message.delivered</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">110ms</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="px-6 py-3 border-t border-surface-variant bg-surface-container-low/20 flex justify-between items-center">
|
|
<span class="text-body-sm text-on-surface-variant">Showing 1-50 of 1,248,302 logs</span>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1 bg-surface-container-lowest border border-surface-variant rounded text-body-sm disabled:opacity-50" disabled="">Previous</button>
|
|
<button class="px-3 py-1 bg-surface-container-lowest border border-surface-variant rounded text-body-sm hover:bg-surface-container transition-colors">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Webhook Payload Viewer (Side Drawer) -->
|
|
<div class="w-[450px] sticky top-[96px] bg-surface-container-lowest rounded-xl shadow-lg border border-surface-variant flex flex-col h-[calc(100vh-160px)]">
|
|
<div class="p-6 border-b border-surface-variant flex justify-between items-center">
|
|
<div>
|
|
<h4 class="font-title-sm text-title-sm text-on-surface">Payload Viewer</h4>
|
|
<p class="text-xs text-on-surface-variant font-mono-code">Event: 562ea1...3b21</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="material-symbols-outlined p-1 rounded hover:bg-surface-container transition-colors text-on-surface-variant">content_copy</button>
|
|
<button class="material-symbols-outlined p-1 rounded hover:bg-surface-container transition-colors text-on-surface-variant">close</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-6 bg-surface-container-low font-mono-code text-mono-code payload-scrollbar">
|
|
<pre class="text-on-secondary-fixed-variant whitespace-pre-wrap"><span class="text-tertiary">{</span>
|
|
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"ev_123456789"</span>,
|
|
<span class="text-primary-container">"object"</span>: <span class="text-tertiary-container">"event"</span>,
|
|
<span class="text-primary-container">"api_version"</span>: <span class="text-tertiary-container">"2023-11"</span>,
|
|
<span class="text-primary-container">"created"</span>: <span class="text-tertiary-container">1700834565</span>,
|
|
<span class="text-primary-container">"data"</span>: <span class="text-tertiary">{</span>
|
|
<span class="text-primary-container">"object"</span>: <span class="text-tertiary-container">{</span>
|
|
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"msg_abc123"</span>,
|
|
<span class="text-primary-container">"to"</span>: <span class="text-tertiary-container">"+1234567890"</span>,
|
|
<span class="text-primary-container">"status"</span>: <span class="text-tertiary-container">"sent"</span>,
|
|
<span class="text-primary-container">"timestamp"</span>: <span class="text-tertiary-container">"1700834564"</span>,
|
|
<span class="text-primary-container">"context"</span>: <span class="text-tertiary">{</span>
|
|
<span class="text-primary-container">"from"</span>: <span class="text-tertiary-container">"+1098765432"</span>,
|
|
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"whatsapp_biz_001"</span>
|
|
<span class="text-tertiary">}</span>
|
|
<span class="text-tertiary">}</span>
|
|
<span class="text-tertiary">}</span>,
|
|
<span class="text-primary-container">"type"</span>: <span class="text-tertiary-container">"message.sent"</span>,
|
|
<span class="text-primary-container">"request"</span>: <span class="text-tertiary">{</span>
|
|
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"req_987654321"</span>,
|
|
<span class="text-primary-container">"idempotency_key"</span>: <span class="text-tertiary-container">"550e8400-e29b-41d4-a716-446655440000"</span>
|
|
<span class="text-tertiary">}</span>
|
|
<span class="text-tertiary">}</span></pre>
|
|
</div>
|
|
<div class="p-4 border-t border-surface-variant flex flex-col gap-2">
|
|
<div class="flex justify-between items-center text-xs">
|
|
<span class="text-on-surface-variant uppercase font-bold tracking-wider">RESPONSE PAYLOAD</span>
|
|
<span class="text-status-success font-bold">200 OK</span>
|
|
</div>
|
|
<div class="bg-surface-dim/30 rounded p-3 font-mono-code text-xs text-on-surface">
|
|
{ "status": "success", "received": true }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |