438 lines
24 KiB
HTML
438 lines
24 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"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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": {
|
|
"surface-variant": "#dce5d8",
|
|
"outline-variant": "#bbcbb9",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container-high": "#e2ebde",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"tertiary": "#93492e",
|
|
"surface-container-highest": "#dce5d8",
|
|
"surface-container-low": "#edf6e9",
|
|
"surface": "#f3fcef",
|
|
"on-primary": "#ffffff",
|
|
"outline": "#6c7b6b",
|
|
"inverse-surface": "#2a332a",
|
|
"secondary-container": "#8cf1e1",
|
|
"on-error": "#ffffff",
|
|
"status-success": "#25D366",
|
|
"on-secondary-fixed": "#00201c",
|
|
"surface-tint": "#006d2f",
|
|
"on-secondary-container": "#006f64",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"error-container": "#ffdad6",
|
|
"background": "#f3fcef",
|
|
"on-primary-fixed": "#002109",
|
|
"surface-container": "#e7f1e4",
|
|
"on-primary-fixed-dim": "#3de273",
|
|
"surface-dim": "#d3ddd0",
|
|
"status-error": "#EF4444",
|
|
"primary-fixed": "#66ff8e",
|
|
"error": "#ba1a1a",
|
|
"on-background": "#151e16",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"surface-bright": "#f3fcef",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"on-surface": "#151e16",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"surface-card": "#FFFFFF",
|
|
"border-subtle": "#E2E8F0",
|
|
"on-primary-container": "#005523",
|
|
"primary": "#006d2f",
|
|
"background-main": "#F8F9FA",
|
|
"status-warning": "#F59E0B",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"status-info": "#3B82F6",
|
|
"secondary": "#006b5f",
|
|
"text-primary": "#1A1C1E",
|
|
"on-error-container": "#93000a",
|
|
"inverse-primary": "#3de273",
|
|
"primary-container": "#25d366",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"text-secondary": "#64748B",
|
|
"tertiary-container": "#ffa07e"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"gutter": "24px",
|
|
"toolbar-height": "64px",
|
|
"container-margin": "32px",
|
|
"base": "8px",
|
|
"card-padding": "20px",
|
|
"sidebar-width": "260px"
|
|
},
|
|
"fontFamily": {
|
|
"mono-code": ["JetBrains Mono"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"title-sm": ["Plus Jakarta Sans"]
|
|
},
|
|
"fontSize": {
|
|
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-main text-on-surface antialiased">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="fixed left-0 top-0 h-screen w-sidebar-width bg-surface-card border-r border-outline-variant shadow-sm flex flex-col py-6 px-4 gap-2 z-50">
|
|
<div class="mb-8 px-4">
|
|
<h1 class="text-headline-md font-headline-md font-extrabold text-primary">WA Business</h1>
|
|
<p class="text-body-sm font-body-sm text-on-surface-variant">Enterprise API</p>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 bg-primary-container text-on-primary-container rounded-lg px-4 py-2 active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="text-label-caps font-label-caps">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
|
<span class="text-label-caps font-label-caps">Conversations</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
<span class="text-label-caps font-label-caps">Templates</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
|
<span class="text-label-caps font-label-caps">Webhooks</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
|
<span class="text-label-caps font-label-caps">Analytics</span>
|
|
</a>
|
|
</nav>
|
|
<button class="mt-4 bg-primary text-on-primary font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 hover:opacity-90 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined" data-icon="add">add</span>
|
|
New Message
|
|
</button>
|
|
<div class="mt-auto flex flex-col gap-1 border-t border-outline-variant pt-4">
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="text-label-caps font-label-caps">Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all" href="#">
|
|
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
|
<span class="text-label-caps font-label-caps">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-sidebar-width flex-1 min-h-screen">
|
|
<!-- TopAppBar -->
|
|
<header class="flex justify-between items-center h-toolbar-height px-container-margin w-full sticky top-0 z-40 bg-surface shadow-sm">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="text-title-sm font-headline-md font-bold text-primary">Dashboard Overview</h2>
|
|
<div class="flex bg-surface-container rounded-full p-1 border border-outline-variant ml-4">
|
|
<button class="px-3 py-1 rounded-full text-label-caps font-bold bg-white text-primary shadow-sm">EN</button>
|
|
<button class="px-3 py-1 rounded-full text-label-caps text-on-surface-variant hover:text-on-surface transition-colors">ID</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="search">search</span>
|
|
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="notifications">notifications</span>
|
|
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="help">help</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 pl-6 border-l border-outline-variant">
|
|
<div class="text-right">
|
|
<p class="text-body-sm font-bold text-on-surface">Admin User</p>
|
|
<p class="text-[10px] text-on-surface-variant font-label-caps">SUPER ADMIN</p>
|
|
</div>
|
|
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border border-primary p-0.5" data-alt="A professional close-up portrait of a corporate executive for a profile picture. The lighting is soft and natural from the side, creating a clean and professional look against a neutral, minimal office background. The color palette is composed of soft whites, light greys, and a touch of corporate green to align with the enterprise dashboard aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCp0ie69-lECYALXnSCAg1z51btPqCIjcLum71vco0plU3syX8gJfTXv0uBcmXsvoKoapQJ2nxF46ffjsSbSskw2jQUDkJ7TjJDuytn3hUZokLRUPn8CSPzOjvhlJ4B42rJuRWG8ZT0YQbwPKZHc1kIYCLIIVsDO8trpb7Uvi7euAeGBl9poQRj3TqTRbwWgsVo7NIKo_f4C3vIB0zg2vm_QA7Ukd28O-lG47bIAphhoqzMemMN4bAiYU9iEBrCz4buQbKTKatZ_VI"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="p-container-margin grid grid-cols-12 gap-gutter">
|
|
<!-- KPI Cards -->
|
|
<div class="col-span-12 grid grid-cols-4 gap-gutter">
|
|
<!-- Total Messages -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-label-caps font-label-caps text-on-surface-variant">TOTAL MESSAGES</span>
|
|
<span class="bg-primary-container/20 text-primary p-1.5 rounded-lg">
|
|
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2 mt-2">
|
|
<h3 class="text-display-lg font-display-lg text-on-surface">1.2M</h3>
|
|
<span class="text-status-success text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span> 12%
|
|
</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant">vs last 30 days</p>
|
|
</div>
|
|
<!-- Delivered -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-label-caps font-label-caps text-on-surface-variant">DELIVERED</span>
|
|
<span class="bg-secondary-container/30 text-secondary p-1.5 rounded-lg">
|
|
<span class="material-symbols-outlined" data-icon="done_all">done_all</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2 mt-2">
|
|
<h3 class="text-display-lg font-display-lg text-on-surface">98.4%</h3>
|
|
<span class="text-status-success text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span> 0.5%
|
|
</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant">1,180,800 messages</p>
|
|
</div>
|
|
<!-- Read -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-label-caps font-label-caps text-on-surface-variant">READ RATE</span>
|
|
<span class="bg-tertiary-container/20 text-tertiary p-1.5 rounded-lg">
|
|
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2 mt-2">
|
|
<h3 class="text-display-lg font-display-lg text-on-surface">76.2%</h3>
|
|
<span class="text-status-error text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-sm" data-icon="trending_down">trending_down</span> 2%
|
|
</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant">914,400 read</p>
|
|
</div>
|
|
<!-- Failed -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-label-caps font-label-caps text-on-surface-variant">FAILED</span>
|
|
<span class="bg-error-container/40 text-error p-1.5 rounded-lg">
|
|
<span class="material-symbols-outlined" data-icon="error">error</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-2 mt-2">
|
|
<h3 class="text-display-lg font-display-lg text-on-surface">1.6%</h3>
|
|
<span class="text-on-surface-variant text-body-sm font-bold flex items-center">
|
|
<span class="material-symbols-outlined text-sm" data-icon="remove">remove</span> 0%
|
|
</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant">19,200 errors</p>
|
|
</div>
|
|
</div>
|
|
<!-- Main Charts Row -->
|
|
<div class="col-span-8 flex flex-col gap-gutter">
|
|
<!-- Volume Chart -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant h-[400px] flex flex-col">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-title-sm font-headline-md text-on-surface">Message Volume (Last 7 Days)</h3>
|
|
<select class="bg-surface-container border-none rounded-lg text-body-sm font-bold py-1 px-3 focus:ring-primary">
|
|
<option>Daily</option>
|
|
<option>Hourly</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex-1 w-full relative group">
|
|
<!-- Simulated Line Chart with CSS Gradients/Shapes -->
|
|
<div class="absolute inset-0 flex items-end justify-between px-4 pb-8">
|
|
<div class="h-[60%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">MON</div></div>
|
|
<div class="h-[75%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">TUE</div></div>
|
|
<div class="h-[65%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">WED</div></div>
|
|
<div class="h-[90%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">THU</div></div>
|
|
<div class="h-[80%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">FRI</div></div>
|
|
<div class="h-[40%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">SAT</div></div>
|
|
<div class="h-[35%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">SUN</div></div>
|
|
</div>
|
|
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 800 300">
|
|
<defs>
|
|
<lineargradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#25D366" stop-opacity="0.3"></stop>
|
|
<stop offset="100%" stop-color="#25D366" stop-opacity="0"></stop>
|
|
</lineargradient>
|
|
</defs>
|
|
<path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180 V300 H0 Z" fill="url(#chartGradient)"></path>
|
|
<path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180" fill="none" stroke="#25D366" stroke-linecap="round" stroke-width="4"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Recent Campaigns Table -->
|
|
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant overflow-hidden">
|
|
<div class="px-card-padding py-4 border-b border-outline-variant flex justify-between items-center">
|
|
<h3 class="text-title-sm font-headline-md text-on-surface">Recent Campaigns</h3>
|
|
<button class="text-primary text-body-sm font-bold hover:underline">View All</button>
|
|
</div>
|
|
<table class="w-full text-left">
|
|
<thead class="bg-surface-container-low text-on-surface-variant">
|
|
<tr>
|
|
<th class="px-card-padding py-3 text-label-caps font-label-caps">CAMPAIGN NAME</th>
|
|
<th class="px-card-padding py-3 text-label-caps font-label-caps">AUDIENCE</th>
|
|
<th class="px-card-padding py-3 text-label-caps font-label-caps">STATUS</th>
|
|
<th class="px-card-padding py-3 text-label-caps font-label-caps">DELIVERY</th>
|
|
<th class="px-card-padding py-3 text-label-caps font-label-caps">DATE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/30">
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-card-padding py-4 text-body-sm font-bold">Summer Flash Sale #4</td>
|
|
<td class="px-card-padding py-4 text-body-sm">45,200 users</td>
|
|
<td class="px-card-padding py-4">
|
|
<span class="bg-status-success/10 text-status-success px-2 py-1 rounded-full text-[10px] font-bold">SENT</span>
|
|
</td>
|
|
<td class="px-card-padding py-4 text-body-sm">99.2%</td>
|
|
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Oct 24, 2023</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-card-padding py-4 text-body-sm font-bold">Member Newsletter Oct</td>
|
|
<td class="px-card-padding py-4 text-body-sm">12,800 users</td>
|
|
<td class="px-card-padding py-4">
|
|
<span class="bg-status-info/10 text-status-info px-2 py-1 rounded-full text-[10px] font-bold">SCHEDULED</span>
|
|
</td>
|
|
<td class="px-card-padding py-4 text-body-sm">--</td>
|
|
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Oct 28, 2023</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-card-padding py-4 text-body-sm font-bold">Product Launch Beta</td>
|
|
<td class="px-card-padding py-4 text-body-sm">800 users</td>
|
|
<td class="px-card-padding py-4">
|
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded-full text-[10px] font-bold">DRAFT</span>
|
|
</td>
|
|
<td class="px-card-padding py-4 text-body-sm">--</td>
|
|
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Nov 02, 2023</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Right Sidebar / Secondary Info -->
|
|
<div class="col-span-4 flex flex-col gap-gutter">
|
|
<!-- Delivery Funnel -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-6">
|
|
<h3 class="text-title-sm font-headline-md text-on-surface">Delivery Funnel</h3>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="relative">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-body-sm font-bold">Sent</span>
|
|
<span class="text-body-sm text-on-surface-variant">1,200,000</span>
|
|
</div>
|
|
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary w-full"></div>
|
|
</div>
|
|
</div>
|
|
<div class="relative ml-4">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-body-sm font-bold">Delivered</span>
|
|
<span class="text-body-sm text-on-surface-variant">1,180,800 (98.4%)</span>
|
|
</div>
|
|
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary/80 w-[98%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="relative ml-8">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-body-sm font-bold">Read</span>
|
|
<span class="text-body-sm text-on-surface-variant">914,400 (76.2%)</span>
|
|
</div>
|
|
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary/60 w-[76%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="relative ml-12">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-body-sm font-bold">Replied</span>
|
|
<span class="text-body-sm text-on-surface-variant">216,000 (18%)</span>
|
|
</div>
|
|
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary/40 w-[18%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Webhook Health Panel -->
|
|
<div class="bg-inverse-surface text-on-primary p-card-padding rounded-xl shadow-lg flex flex-col gap-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary-container" data-icon="terminal">terminal</span>
|
|
<h3 class="text-title-sm font-headline-md">Webhook Health</h3>
|
|
</div>
|
|
<span class="relative flex h-3 w-3">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-status-success opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-status-success"></span>
|
|
</span>
|
|
</div>
|
|
<div class="bg-on-surface/10 rounded-lg p-3 border border-outline/20">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-label-caps opacity-70">ENDPOINT</span>
|
|
<span class="text-label-caps text-status-success">LIVE</span>
|
|
</div>
|
|
<code class="text-mono-code font-mono-code block truncate opacity-90">https://api.acme.corp/v1/wh/whatsapp</code>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-body-sm opacity-80">Avg. Response Time</span>
|
|
<span class="text-body-sm font-bold">142ms</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-body-sm opacity-80">Success Rate</span>
|
|
<span class="text-body-sm font-bold">99.98%</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-body-sm opacity-80">Pending Payloads</span>
|
|
<span class="text-body-sm font-bold">0</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-2 py-2 border border-outline-variant/30 rounded-lg text-label-caps font-bold hover:bg-white/5 transition-colors">
|
|
VIEW DEBUG LOGS
|
|
</button>
|
|
</div>
|
|
<!-- System Messages -->
|
|
<div class="bg-surface-card p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-3">
|
|
<h3 class="text-label-caps font-label-caps text-on-surface-variant">SYSTEM ALERTS</h3>
|
|
<div class="flex gap-3 p-3 bg-error-container/20 rounded-lg border-l-4 border-error">
|
|
<span class="material-symbols-outlined text-error" data-icon="warning">warning</span>
|
|
<div>
|
|
<p class="text-body-sm font-bold text-on-error-container">Credit Low Alert</p>
|
|
<p class="text-[12px] text-on-error-container/80">Balance is below $50.00. Top up soon to avoid interruption.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 p-3 bg-surface-container rounded-lg border-l-4 border-primary">
|
|
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
|
|
<div>
|
|
<p class="text-body-sm font-bold text-on-surface">New Feature</p>
|
|
<p class="text-[12px] text-on-surface-variant">Multi-device authentication is now available for all business accounts.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |