wirabasalamah/BizOne-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial BizOne portal setup

Browse Source
This commit is contained in:
Wira Irawan
2026-05-11 11:36:33 +07:00
commit 57017dd397
249 changed files with 41305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

509
stitch_bizone/system_logs_queue_whatsapp_business_admin/code.html Normal file
View File

@ -0,0 +1,509 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WhatsApp Business Admin Console - Activity Logs</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&amp;family=Inter:wght@400;500;600&amp;family=JetBrains+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary-fixed-dim": "#3de273",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface": "#f3fcef",
"secondary-container": "#8cf1e1",
"surface-tint": "#006d2f",
"secondary-fixed-dim": "#72d8c8",
"on-primary": "#ffffff",
"status-error": "#EF4444",
"surface-bright": "#f3fcef",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary-fixed": "#002109",
"background": "#f3fcef",
"surface-variant": "#dce5d8",
"on-tertiary-fixed": "#380d00",
"on-surface-variant": "#3c4a3d",
"on-primary-container": "#005523",
"tertiary-container": "#ffa07e",
"primary-fixed": "#66ff8e",
"secondary-fixed": "#8ff4e3",
"on-tertiary": "#ffffff",
"tertiary-fixed-dim": "#ffb59b",
"on-error-container": "#93000a",
"on-background": "#151e16",
"inverse-primary": "#3de273",
"on-primary-fixed-variant": "#005322",
"surface-container-low": "#edf6e9",
"surface-card": "#FFFFFF",
"outline-variant": "#bbcbb9",
"tertiary": "#93492e",
"on-secondary-fixed-variant": "#005047",
"status-warning": "#F59E0B",
"surface-container-highest": "#dce5d8",
"on-secondary-fixed": "#00201c",
"text-primary": "#1A1C1E",
"surface-dim": "#d3ddd0",
"on-error": "#ffffff",
"background-main": "#F8F9FA",
"status-success": "#25D366",
"error-container": "#ffdad6",
"outline": "#6c7b6b",
"surface-container": "#e7f1e4",
"surface-container-lowest": "#ffffff",
"text-secondary": "#64748B",
"tertiary-fixed": "#ffdbcf",
"secondary": "#006b5f",
"inverse-on-surface": "#eaf3e6",
"status-info": "#3B82F6",
"border-subtle": "#E2E8F0",
"surface-container-high": "#e2ebde",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"on-secondary": "#ffffff",
"inverse-surface": "#2a332a",
"primary-container": "#25d366"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-margin": "32px",
"gutter": "24px",
"sidebar-width": "260px",
"toolbar-height": "64px",
"card-padding": "20px",
"base": "8px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"title-sm": ["Plus Jakarta Sans"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"mono-code": ["JetBrains Mono"]
},
"fontSize": {
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #f3fcef;
font-family: 'Inter', sans-serif;
}
.sidebar-active {
color: #006d2f !important;
font-weight: 700;
}
</style>
</head>
<body class="bg-background-main text-on-surface">
<!-- 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-8 px-2">
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
<p class="text-body-sm text-on-surface-variant opacity-70">Admin Console</p>
</div>
<button class="mb-8 w-full py-3 px-4 bg-primary text-on-primary rounded-xl font-title-sm flex items-center justify-center gap-2 hover:opacity-90 transition-all scale-98 active:scale-95">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">chat</span>
Conversations
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">contacts</span>
Contacts
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">description</span>
Templates
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">webhook</span>
Webhooks
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-primary font-bold bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">monitoring</span>
Analytics
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">settings</span>
Settings
</a>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
Help Center
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">logout</span>
Logout
</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-4">
<h2 class="font-title-sm text-title-sm text-primary">Admin Dashboard</h2>
<div class="h-6 w-[1px] bg-outline-variant"></div>
<div class="flex items-center bg-surface-container px-3 py-1.5 rounded-lg border border-outline-variant w-80">
<span class="material-symbols-outlined text-on-surface-variant text-[20px] mr-2">search</span>
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-full p-0" placeholder="Search system logs..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 text-body-sm font-medium">
<span class="text-primary font-bold cursor-pointer">English</span>
<span class="text-on-surface-variant cursor-pointer hover:text-primary transition-all">Bahasa</span>
</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>
<img alt="Admin Profile Image" class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A professional headshot of a corporate technology administrator in a bright office setting with soft natural lighting and a minimalist background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAtvHchD_3JN7RiAAwLeqen9TJWfq2h7b1kuZJmflEyq5u551_r3BFGG8_buCOSmPKPJUm9CXXJpE2OPrkyvypw5OK1gVpIGKLgJtyyectuKOCG-q5wrO4uoWCb2jthPxdwoGhcftcBksZkXGHPRuXyMIY3NY85Fk0iKmd-XdxGGbftLvi9R01XE1PR-YScdoO_yJK9Kyxlw-WL-ipuZJZs73vvHJAxYNVdyC13cC7pDTXOdFAueL4gOg3sXwO5DkZQxehEoMNz0xg"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="ml-[260px] pt-[64px] p-container-margin">
<div class="max-w-[1400px] mx-auto">
<!-- Header Section -->
<div class="mb-8 flex justify-between items-end">
<div>
<h3 class="font-display-lg text-display-lg text-on-surface mb-2">Activity Logs &amp; Queue Monitor</h3>
<p class="text-body-md text-on-surface-variant">Real-time surveillance of system processes, background jobs, and administrative actions.</p>
</div>
<div class="flex gap-3">
<button class="px-4 py-2 bg-surface-container-lowest border border-outline-variant rounded-lg font-label-caps text-on-surface-variant flex items-center gap-2 hover:bg-surface-container transition-all">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
FILTER LOGS
</button>
<button class="px-4 py-2 bg-surface-container-lowest border border-outline-variant rounded-lg font-label-caps text-on-surface-variant flex items-center gap-2 hover:bg-surface-container transition-all">
<span class="material-symbols-outlined text-[18px]">download</span>
EXPORT CSV
</button>
</div>
</div>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-12 gap-gutter">
<!-- Queue Monitor Widget -->
<div class="col-span-12 lg:col-span-4 space-y-gutter">
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-card-padding">
<div class="flex justify-between items-center mb-6">
<h4 class="font-title-sm text-title-sm">Queue Monitor</h4>
<span class="flex items-center gap-1.5 px-2 py-1 bg-status-success/10 text-status-success rounded text-[11px] font-bold">
<span class="w-2 h-2 rounded-full bg-status-success animate-pulse"></span> LIVE
</span>
</div>
<div class="space-y-4">
<!-- Pending -->
<div class="p-4 bg-surface-container-low rounded-lg flex items-center justify-between border-l-4 border-status-info">
<div>
<p class="text-label-caps text-on-surface-variant mb-1">PENDING JOBS</p>
<p class="text-headline-md font-bold">1,284</p>
</div>
<span class="material-symbols-outlined text-status-info text-[32px]">schedule</span>
</div>
<!-- Processing -->
<div class="p-4 bg-surface-container-low rounded-lg flex items-center justify-between border-l-4 border-primary">
<div>
<p class="text-label-caps text-on-surface-variant mb-1">PROCESSING</p>
<p class="text-headline-md font-bold">42</p>
</div>
<span class="material-symbols-outlined text-primary text-[32px] animate-spin">autorenew</span>
</div>
<!-- Failed -->
<div class="p-4 bg-surface-container-low rounded-lg flex items-center justify-between border-l-4 border-status-error">
<div>
<p class="text-label-caps text-on-surface-variant mb-1">FAILED (24H)</p>
<p class="text-headline-md font-bold text-status-error">7</p>
</div>
<span class="material-symbols-outlined text-status-error text-[32px]">error_outline</span>
</div>
</div>
<div class="mt-6 pt-6 border-t border-outline-variant">
<h5 class="font-label-caps text-on-surface-variant mb-4 uppercase tracking-widest">Worker Health</h5>
<div class="space-y-3">
<div class="flex items-center justify-between text-body-sm">
<span>node-worker-01</span>
<span class="text-status-success font-semibold">98% Load</span>
</div>
<div class="w-full bg-surface-container-highest rounded-full h-1.5">
<div class="bg-status-success h-1.5 rounded-full w-[98%]"></div>
</div>
<div class="flex items-center justify-between text-body-sm">
<span>node-worker-02</span>
<span class="text-status-warning font-semibold">12% Load</span>
</div>
<div class="w-full bg-surface-container-highest rounded-full h-1.5">
<div class="bg-status-warning h-1.5 rounded-full w-[12%]"></div>
</div>
</div>
</div>
</div>
<!-- System Status Card -->
<div class="bg-primary-container/20 rounded-xl border border-primary/20 p-card-padding">
<div class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">bolt</span>
<div>
<h4 class="font-title-sm text-primary mb-1">Queue Throughput</h4>
<p class="text-body-sm text-on-primary-container">System is currently processing 840 messages per minute. Optimization recommended for peak hours.</p>
</div>
</div>
</div>
</div>
<!-- Activities Log Table -->
<div class="col-span-12 lg:col-span-8">
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-5 border-b border-outline-variant flex justify-between items-center">
<h4 class="font-title-sm text-title-sm">Technical Activity Logs</h4>
<div class="flex gap-2">
<span class="px-2 py-1 rounded bg-surface-container text-body-sm text-on-surface-variant">Total: 45,290 events</span>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-surface-container-low">
<tr>
<th class="px-6 py-3 font-label-caps text-on-surface-variant uppercase">Timestamp</th>
<th class="px-6 py-3 font-label-caps text-on-surface-variant uppercase">Action</th>
<th class="px-6 py-3 font-label-caps text-on-surface-variant uppercase">User / Service</th>
<th class="px-6 py-3 font-label-caps text-on-surface-variant uppercase">Status</th>
<th class="px-6 py-3 font-label-caps text-on-surface-variant uppercase">Payload</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="px-6 py-4 font-mono-code text-body-sm text-on-surface-variant whitespace-nowrap">2023-10-27 14:22:01</td>
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-body-md font-semibold text-on-surface">BROADCAST_START</span>
<span class="text-[11px] text-on-surface-variant">Marketing Campaign v2</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-secondary-container flex items-center justify-center text-[10px] font-bold text-on-secondary-container">AD</div>
<span class="text-body-sm">admin_jane</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded-full bg-status-success/10 text-status-success text-[11px] font-bold uppercase tracking-wider">Success</span>
</td>
<td class="px-6 py-4">
<button class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">code</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="px-6 py-4 font-mono-code text-body-sm text-on-surface-variant whitespace-nowrap">2023-10-27 14:21:55</td>
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-body-md font-semibold text-on-surface">WEBHOOK_RETRY</span>
<span class="text-[11px] text-on-surface-variant">Endpoint: /api/v1/update</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">robot</span>
<span class="text-body-sm">QueueWorker_02</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded-full bg-status-warning/10 text-status-warning text-[11px] font-bold uppercase tracking-wider">Pending</span>
</td>
<td class="px-6 py-4">
<button class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">code</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="px-6 py-4 font-mono-code text-body-sm text-on-surface-variant whitespace-nowrap">2023-10-27 14:21:48</td>
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-body-md font-semibold text-on-surface">AUTH_FAILURE</span>
<span class="text-[11px] text-on-surface-variant">Invalid Token Attempt</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">public</span>
<span class="text-body-sm">IP: 192.168.1.1</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded-full bg-status-error/10 text-status-error text-[11px] font-bold uppercase tracking-wider">Rejected</span>
</td>
<td class="px-6 py-4">
<button class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">code</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="px-6 py-4 font-mono-code text-body-sm text-on-surface-variant whitespace-nowrap">2023-10-27 14:20:12</td>
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-body-md font-semibold text-on-surface">TEMPLATE_CREATE</span>
<span class="text-[11px] text-on-surface-variant">New template: Welcome_V2</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-primary-container flex items-center justify-center text-[10px] font-bold text-on-primary-container">MK</div>
<span class="text-body-sm">mike_dev</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded-full bg-status-success/10 text-status-success text-[11px] font-bold uppercase tracking-wider">Approved</span>
</td>
<td class="px-6 py-4">
<button class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">code</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="px-6 py-4 font-mono-code text-body-sm text-on-surface-variant whitespace-nowrap">2023-10-27 14:19:44</td>
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-body-md font-semibold text-on-surface">EXPORT_COMPLETE</span>
<span class="text-[11px] text-on-surface-variant">User_Database_Daily.csv</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">settings_suggest</span>
<span class="text-body-sm">SystemScheduler</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded-full bg-status-success/10 text-status-success text-[11px] font-bold uppercase tracking-wider">Success</span>
</td>
<td class="px-6 py-4">
<button class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">code</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-outline-variant bg-surface-container-lowest flex items-center justify-between">
<span class="text-body-sm text-on-surface-variant">Showing 5 of 45,290 logs</span>
<div class="flex gap-2">
<button class="p-2 border border-outline-variant rounded hover:bg-surface-container-low transition-all">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="p-2 border border-outline-variant rounded hover:bg-surface-container-low transition-all">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Webhook Payload Preview (Asymmetric Drawer Simulation) -->
<div class="mt-gutter grid grid-cols-12 gap-gutter">
<div class="col-span-12">
<div class="bg-surface-container-low border border-outline-variant rounded-xl p-card-padding flex flex-col md:flex-row gap-6 items-center">
<div class="flex-shrink-0 w-16 h-16 bg-surface-container-lowest rounded-full flex items-center justify-center shadow-sm">
<span class="material-symbols-outlined text-primary text-[32px]">terminal</span>
</div>
<div class="flex-grow">
<h4 class="font-title-sm mb-1">Live Tail Mode</h4>
<p class="text-body-sm text-on-surface-variant max-w-2xl">Streaming real-time logs directly from the message processing engine. Use this for debugging active broadcast campaigns and webhook handshake failures.</p>
</div>
<div class="flex-shrink-0">
<button class="px-6 py-3 bg-primary text-on-primary rounded-lg font-title-sm flex items-center gap-2 shadow-sm hover:shadow-md transition-all">
<span class="material-symbols-outlined text-[20px]">play_circle</span>
Launch Debug Console
</button>
</div>
</div>
</div>
</div>
<!-- System Metrics Visualisation -->
<div class="mt-gutter grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-4">
<div class="flex items-center justify-between">
<span class="text-label-caps text-on-surface-variant">API LATENCY</span>
<span class="material-symbols-outlined text-primary">bar_chart</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-display-lg font-bold">124ms</span>
<span class="text-status-success text-body-sm font-semibold">↓ 12%</span>
</div>
<div class="w-full h-12 flex items-end gap-1">
<div class="flex-1 bg-surface-container-high rounded-t-sm h-[40%]"></div>
<div class="flex-1 bg-surface-container-high rounded-t-sm h-[60%]"></div>
<div class="flex-1 bg-surface-container-high rounded-t-sm h-[45%]"></div>
<div class="flex-1 bg-surface-container-high rounded-t-sm h-[80%]"></div>
<div class="flex-1 bg-primary rounded-t-sm h-[35%]"></div>
<div class="flex-1 bg-primary rounded-t-sm h-[20%]"></div>
<div class="flex-1 bg-primary rounded-t-sm h-[30%]"></div>
</div>
</div>
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-4">
<div class="flex items-center justify-between">
<span class="text-label-caps text-on-surface-variant">DB CONNECTIONS</span>
<span class="material-symbols-outlined text-on-surface-variant">database</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-display-lg font-bold">84</span>
<span class="text-status-warning text-body-sm font-semibold">Active</span>
</div>
<div class="w-full h-12 flex items-center justify-center">
<div class="w-full bg-surface-container-high rounded-full h-4 overflow-hidden">
<div class="bg-status-warning h-full w-[42%]"></div>
</div>
</div>
</div>
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-4">
<div class="flex items-center justify-between">
<span class="text-label-caps text-on-surface-variant">MEMORY USAGE</span>
<span class="material-symbols-outlined text-on-surface-variant">memory</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-display-lg font-bold">4.2GB</span>
<span class="text-on-surface-variant text-body-sm font-semibold">of 16GB</span>
</div>
<div class="w-full h-12 flex items-end gap-1">
<div class="flex-1 bg-primary/20 rounded-t-sm h-[60%]"></div>
<div class="flex-1 bg-primary/20 rounded-t-sm h-[65%]"></div>
<div class="flex-1 bg-primary/20 rounded-t-sm h-[70%]"></div>
<div class="flex-1 bg-primary/20 rounded-t-sm h-[62%]"></div>
<div class="flex-1 bg-primary/20 rounded-t-sm h-[68%]"></div>
<div class="flex-1 bg-primary/20 rounded-t-sm h-[72%]"></div>
<div class="flex-1 bg-primary h-[75%]"></div>
</div>
</div>
</div>
</div>
</main>
<!-- Contextual FAB (Only for specific primary tasks) -->
<!-- Hidden here as per UX goals for this specific technical dashboard view -->
</body></html>

BIN
stitch_bizone/system_logs_queue_whatsapp_business_admin/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB