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

Prepare BizOne portal production wallet and UI

Browse Source
This commit is contained in:
wirabasalamah
2026-05-22 13:13:10 +07:00
parent 36be8607e0
commit 5144207c42
124 changed files with 11034 additions and 7720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
stitch_bizone/webhook_settings_bizone_standard_layout/code.html Normal file
View File

@ -0,0 +1,403 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Webhook Settings - BizOne Admin</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:wght@400&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": {
"on-background": "#151e16",
"primary-container": "#e0f2fe",
"text-secondary": "#64748B",
"on-secondary-fixed-variant": "#005047",
"outline": "#cbd5e1",
"primary-fixed-dim": "#3de273",
"tertiary-fixed": "#ffdbcf",
"status-warning": "#F59E0B",
"surface-container-low": "#edf6e9",
"secondary-container": "#8cf1e1",
"background-main": "#f8fafc",
"surface-container-lowest": "#ffffff",
"surface-variant": "#dce5d8",
"secondary": "#0ea5e9",
"primary": "#001b44",
"on-primary-fixed": "#002109",
"tertiary-fixed-dim": "#ffb59b",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary-fixed-variant": "#005322",
"surface-container-high": "#e2ebde",
"on-tertiary": "#ffffff",
"inverse-surface": "#2a332a",
"secondary-fixed": "#8ff4e3",
"surface-container": "#e2e8f0",
"status-error": "#ef4444",
"on-surface": "#1e293b",
"on-secondary": "#ffffff",
"error-container": "#ffdad6",
"tertiary-container": "#ffa07e",
"on-surface-variant": "#475569",
"secondary-fixed-dim": "#72d8c8",
"text-primary": "#1e293b",
"outline-variant": "#e2e8f0",
"on-error-container": "#93000a",
"background": "#f8fafc",
"on-primary-container": "#001b44",
"error": "#ba1a1a",
"surface-bright": "#ffffff",
"surface-card": "#ffffff",
"on-error": "#ffffff",
"inverse-primary": "#3de273",
"surface": "#ffffff",
"status-success": "#10b981",
"on-primary": "#ffffff",
"inverse-on-surface": "#eaf3e6",
"status-info": "#3B82F6",
"surface-tint": "#001b44",
"primary-fixed": "#66ff8e",
"on-secondary-fixed": "#00201c",
"tertiary": "#93492e",
"surface-dim": "#d3ddd0",
"border-subtle": "#e2e8f0",
"surface-container-highest": "#dce5d8",
"on-tertiary-fixed-variant": "#763319",
"on-tertiary-fixed": "#380d00"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"sidebar-width": "280px",
"base": "8px",
"container-margin": "32px",
"card-padding": "24px",
"gutter": "24px",
"toolbar-height": "72px"
},
"fontFamily": {
"mono-code": ["JetBrains Mono"],
"body-sm": ["Inter"],
"title-sm": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"display-lg": ["Plus Jakarta Sans"],
"label-caps": ["Inter"]
},
"fontSize": {
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
background-color: #f8fafc;
font-family: 'Inter', sans-serif;
color: #1e293b;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sidebar-active {
background-color: rgba(14, 165, 233, 0.15);
color: #38bdf8;
border-left: 4px solid #38bdf8;
}
</style>
</head>
<body class="flex min-h-screen">
<!-- Sidebar -->
<aside class="fixed left-0 top-0 h-screen w-sidebar-width bg-primary flex flex-col z-50">
<!-- Sidebar Header -->
<div class="h-toolbar-height bg-white px-6 flex items-center border-b border-outline-variant">
<img alt="BizOne Logo" class="h-10 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
</div>
<!-- Sidebar Content -->
<nav class="flex-1 flex flex-col gap-1 py-8 px-4 overflow-y-auto">
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="text-body-md font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
<span class="text-body-md font-medium">Conversations</span>
</a>
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="text-body-md font-medium">Templates</span>
</a>
<a class="flex items-center gap-3 sidebar-active px-4 py-3 rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
<span class="text-body-md font-medium">Webhooks</span>
</a>
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span class="text-body-md font-medium">Analytics</span>
</a>
<div class="mt-auto flex flex-col gap-1 pt-6 border-t border-white/10">
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="text-body-md font-medium">Settings</span>
</a>
<a class="flex items-center gap-3 text-slate-300 px-4 py-3 hover:bg-white/10 rounded-lg transition-all" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span class="text-body-md font-medium">Logout</span>
</a>
</div>
</nav>
</aside>
<div class="flex-1 ml-sidebar-width flex flex-col min-h-screen">
<!-- TopNavBar -->
<header class="flex justify-between items-center h-toolbar-height px-container-margin w-full sticky top-0 z-40 bg-white border-b border-outline-variant shadow-sm">
<div class="flex items-center gap-4">
<h2 class="text-title-sm font-headline-md font-bold text-primary">WhatsApp Business Admin</h2>
</div>
<div class="flex items-center gap-6">
<div class="relative group">
<span class="material-symbols-outlined text-slate-500 cursor-pointer hover:bg-slate-50 p-2 rounded-full transition-colors" data-icon="notifications">notifications</span>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-status-error rounded-full ring-2 ring-white"></span>
</div>
<span class="material-symbols-outlined text-slate-500 cursor-pointer hover:bg-slate-50 p-2 rounded-full transition-colors" data-icon="help">help</span>
<div class="flex items-center gap-3 cursor-pointer group px-2 py-1 rounded-lg hover:bg-slate-50 transition-all border border-transparent hover:border-slate-200">
<img alt="Admin Avatar" class="w-8 h-8 rounded-full border border-slate-200" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7OhiL1jK_ev4Ss7zYHrMOuKTGoBWmnISUetQKsVw17SzKlDikec7FdtDGDSaCvtvepCAdapwObSiu7J1RcPaJ828EWfevk7EfBAV-yL__HmeQA5ers82aOYDDwNKT95tnuqM81r8UvOyASf0MrdtxhxUMUIQL-0dvGWwCVeFJsnLNoSDUVLeQQLikuYQBu8fmJULXPRAP7pzgLb_ZN9jpXZ0iVPD4frnMilPwip9QjlJmh4Stvd1eKn5-BIfKe1HV9lhnIW7HX28"/>
<span class="text-body-sm font-semibold text-slate-700 hidden sm:block">Admin User</span>
<span class="material-symbols-outlined text-slate-400" data-icon="expand_more">expand_more</span>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="p-container-margin max-w-7xl mx-auto w-full">
<header class="mb-8">
<h1 class="text-display-lg font-display-lg text-primary">Webhook Settings</h1>
<p class="text-body-md font-body-md text-text-secondary mt-1">Configure your endpoint URLs and subscribe to specific events.</p>
</header>
<div class="grid grid-cols-12 gap-gutter">
<!-- Left Column: Configurations -->
<div class="col-span-12 lg:col-span-8 space-y-gutter">
<!-- Section 1: Endpoint Configuration -->
<section class="bg-surface-card rounded-xl shadow-sm border border-outline-variant p-card-padding">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-secondary bg-sky-50 p-2 rounded-lg" data-icon="link">link</span>
<h3 class="text-title-sm font-headline-md text-primary">Endpoint Configuration</h3>
</div>
<div class="space-y-6">
<div class="space-y-2">
<label class="text-label-caps font-label-caps text-on-surface-variant flex justify-between">
Webhook URL
<span class="text-status-success flex items-center gap-1 font-bold"><span class="material-symbols-outlined text-[16px] fill-1" data-icon="check_circle">check_circle</span> Verified</span>
</label>
<div class="relative">
<input class="w-full bg-slate-50 px-4 py-3 rounded-lg border border-outline-variant focus:border-secondary focus:ring-1 focus:ring-secondary outline-none text-body-md font-body-md transition-all" readonly="" type="text" value="https://api.enterprise-connector.io/v1/webhooks/whatsapp"/>
</div>
<p class="text-body-sm font-body-sm text-text-secondary">All event notifications will be sent to this HTTPS endpoint.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-2">
<label class="text-label-caps font-label-caps text-on-surface-variant">Verify Token</label>
<input class="w-full bg-slate-50 px-4 py-3 rounded-lg border border-outline-variant focus:border-secondary focus:ring-1 focus:ring-secondary outline-none text-body-md font-body-md" type="password" value="************************"/>
</div>
<div class="space-y-2">
<label class="text-label-caps font-label-caps text-on-surface-variant">Signing Secret</label>
<div class="relative flex items-center">
<input class="w-full bg-slate-50 px-4 py-3 pr-12 rounded-lg border border-outline-variant focus:border-secondary focus:ring-1 focus:ring-secondary outline-none text-mono-code font-mono-code" readonly="" type="text" value="whsec_09x2u...v9z2"/>
<button class="absolute right-3 text-text-secondary hover:text-secondary">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</div>
</div>
</div>
<div class="pt-4 flex items-center justify-end gap-3">
<button class="px-6 py-2.5 rounded-lg border border-slate-300 text-slate-700 font-label-caps hover:bg-slate-50 transition-all active:scale-95">Send Test Payload</button>
<button class="px-6 py-2.5 rounded-lg bg-secondary text-white font-label-caps shadow-md hover:bg-sky-600 transition-all active:scale-95">Save Changes</button>
</div>
</div>
</section>
<!-- Section 2: Event Subscriptions -->
<section class="bg-surface-card rounded-xl shadow-sm border border-outline-variant p-card-padding">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-secondary bg-sky-50 p-2 rounded-lg" data-icon="notifications_active">notifications_active</span>
<h3 class="text-title-sm font-headline-md text-primary">Event Subscriptions</h3>
</div>
<div class="space-y-1">
<!-- Event Row -->
<div class="flex items-center justify-between py-4 border-b border-outline-variant last:border-0 hover:bg-slate-50/50 transition-colors px-2 rounded-lg">
<div class="space-y-1">
<span class="text-body-md font-semibold text-on-surface">messages</span>
<p class="text-body-sm text-text-secondary">Get notified when a customer sends a text, image, or media message.</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
</label>
</div>
<!-- Event Row -->
<div class="flex items-center justify-between py-4 border-b border-outline-variant last:border-0 hover:bg-slate-50/50 transition-colors px-2 rounded-lg">
<div class="space-y-1">
<span class="text-body-md font-semibold text-on-surface">message_deliveries</span>
<p class="text-body-sm text-text-secondary">Real-time status updates when your messages are delivered to recipients.</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
</label>
</div>
<!-- Event Row -->
<div class="flex items-center justify-between py-4 border-b border-outline-variant last:border-0 hover:bg-slate-50/50 transition-colors px-2 rounded-lg">
<div class="space-y-1">
<span class="text-body-md font-semibold text-on-surface">message_read</span>
<p class="text-body-sm text-text-secondary">Confirmation when a customer has read the message sent from your business.</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
</label>
</div>
<!-- Event Row -->
<div class="flex items-center justify-between py-4 border-b border-outline-variant last:border-0 hover:bg-slate-50/50 transition-colors px-2 rounded-lg">
<div class="space-y-1">
<span class="text-body-md font-semibold text-on-surface">account_update</span>
<p class="text-body-sm text-text-secondary">Alerts about changes to your WABA account, health, or policy status.</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
</label>
</div>
<!-- Event Row -->
<div class="flex items-center justify-between py-4 border-b border-outline-variant last:border-0 hover:bg-slate-50/50 transition-colors px-2 rounded-lg">
<div class="space-y-1">
<span class="text-body-md font-semibold text-on-surface">template_category_update</span>
<p class="text-body-sm text-text-secondary">Receive updates when template categories are changed by Meta reviewers.</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
</label>
</div>
</div>
</section>
</div>
<!-- Right Column: Health & Status -->
<div class="col-span-12 lg:col-span-4 space-y-gutter">
<section class="bg-surface-card rounded-xl shadow-sm border border-outline-variant p-card-padding">
<div class="flex justify-between items-center mb-6">
<h3 class="text-label-caps font-label-caps text-on-surface-variant">Health &amp; Performance</h3>
<span class="px-3 py-1 rounded-full bg-emerald-50 text-emerald-600 text-[12px] font-bold flex items-center gap-1.5 border border-emerald-100">
<span class="w-1.5 h-1.5 bg-emerald-600 rounded-full animate-pulse"></span>
Active
</span>
</div>
<div class="grid grid-cols-1 gap-4 mb-8">
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<p class="text-body-sm text-text-secondary mb-1">Average Latency</p>
<div class="flex items-end gap-2">
<span class="text-headline-md font-bold text-primary">142ms</span>
<span class="text-emerald-600 text-[12px] font-bold mb-1 flex items-center">
<span class="material-symbols-outlined text-[14px]" data-icon="trending_down">trending_down</span>
12%
</span>
</div>
</div>
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<p class="text-body-sm text-text-secondary mb-1">Success Rate</p>
<div class="flex items-end gap-2">
<span class="text-headline-md font-bold text-primary">99.8%</span>
<span class="text-emerald-600 text-[12px] font-bold mb-1">Stable</span>
</div>
</div>
<div class="p-4 bg-slate-50 rounded-lg border border-slate-100">
<p class="text-body-sm text-text-secondary mb-1">Peak Events (1h)</p>
<div class="flex items-end gap-2">
<span class="text-headline-md font-bold text-primary">1.2k</span>
<span class="text-text-secondary text-[12px] mb-1 font-medium">ev/min</span>
</div>
</div>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center">
<h4 class="text-label-caps font-label-caps text-on-surface-variant">Recent Deliveries</h4>
<a class="text-[12px] text-secondary hover:underline font-bold" href="#">View Logs</a>
</div>
<div class="overflow-hidden rounded-lg border border-outline-variant">
<table class="w-full text-left text-body-sm border-collapse">
<thead class="bg-slate-50">
<tr>
<th class="px-3 py-2 text-label-caps font-label-caps text-on-surface-variant">Time</th>
<th class="px-3 py-2 text-label-caps font-label-caps text-on-surface-variant">Event</th>
<th class="px-3 py-2 text-label-caps font-label-caps text-on-surface-variant text-right">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-3 py-3 text-slate-700 whitespace-nowrap">14:02:11</td>
<td class="px-3 py-3 font-mono-code text-[11px] text-slate-600">messages</td>
<td class="px-3 py-3 text-right">
<span class="text-emerald-600 font-bold">200 OK</span>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-3 py-3 text-slate-700 whitespace-nowrap">14:01:58</td>
<td class="px-3 py-3 font-mono-code text-[11px] text-slate-600">delivery</td>
<td class="px-3 py-3 text-right">
<span class="text-emerald-600 font-bold">200 OK</span>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-3 py-3 text-slate-700 whitespace-nowrap">13:58:44</td>
<td class="px-3 py-3 font-mono-code text-[11px] text-slate-600">read</td>
<td class="px-3 py-3 text-right">
<span class="text-emerald-600 font-bold">200 OK</span>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-3 py-3 text-slate-700 whitespace-nowrap">13:55:02</td>
<td class="px-3 py-3 font-mono-code text-[11px] text-slate-600">messages</td>
<td class="px-3 py-3 text-right">
<span class="text-emerald-600 font-bold">200 OK</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-8 pt-6 border-t border-outline-variant">
<div class="flex items-center gap-3 p-4 bg-amber-50 rounded-lg border border-amber-100">
<span class="material-symbols-outlined text-amber-500 fill-1" data-icon="warning">warning</span>
<div>
<p class="text-body-sm font-bold text-amber-900">Retries Enabled</p>
<p class="text-[12px] text-amber-800">System will retry failed deliveries up to 5 times.</p>
</div>
</div>
</div>
</section>
<!-- Helpful Links -->
<div class="p-card-padding">
<h4 class="text-label-caps font-label-caps text-text-secondary mb-4 uppercase tracking-wider">Documentation</h4>
<ul class="space-y-4">
<li><a class="flex items-center gap-2 text-body-sm text-secondary hover:text-sky-700 font-semibold" href="#"><span class="material-symbols-outlined text-[18px]" data-icon="auto_stories">auto_stories</span> Webhook Integration Guide</a></li>
<li><a class="flex items-center gap-2 text-body-sm text-secondary hover:text-sky-700 font-semibold" href="#"><span class="material-symbols-outlined text-[18px]" data-icon="terminal">terminal</span> Testing with CLI</a></li>
<li><a class="flex items-center gap-2 text-body-sm text-secondary hover:text-sky-700 font-semibold" href="#"><span class="material-symbols-outlined text-[18px]" data-icon="security">security</span> Signature Verification</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB