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

197
stitch_bizone/2fa_verification_whatsapp_business_admin/code.html
View File

@ -1,197 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>2FA Verification | WhatsApp Business 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;500;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": {
"outline": "#6c7b6b",
"surface-container-lowest": "#ffffff",
"on-tertiary": "#ffffff",
"tertiary-container": "#ffa07e",
"secondary-fixed-dim": "#72d8c8",
"on-surface-variant": "#3c4a3d",
"background-main": "#F8F9FA",
"on-error": "#ffffff",
"surface-variant": "#dce5d8",
"surface-dim": "#d3ddd0",
"on-secondary-container": "#006f64",
"tertiary": "#93492e",
"surface-bright": "#f3fcef",
"on-primary-container": "#005523",
"on-tertiary-fixed": "#380d00",
"surface-container-highest": "#dce5d8",
"secondary": "#006b5f",
"on-primary": "#ffffff",
"status-success": "#25D366",
"surface": "#f3fcef",
"status-info": "#3B82F6",
"surface-container-high": "#e2ebde",
"text-primary": "#1A1C1E",
"surface-container-low": "#edf6e9",
"secondary-fixed": "#8ff4e3",
"tertiary-fixed": "#ffdbcf",
"on-secondary-fixed-variant": "#005047",
"status-error": "#EF4444",
"on-primary-fixed-variant": "#005322",
"outline-variant": "#bbcbb9",
"on-background": "#151e16",
"status-warning": "#F59E0B",
"error-container": "#ffdad6",
"primary-container": "#25d366",
"surface-tint": "#006d2f",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"on-surface": "#151e16",
"secondary-container": "#8cf1e1",
"inverse-on-surface": "#eaf3e6",
"on-tertiary-container": "#78351b",
"surface-container": "#e7f1e4",
"background": "#f3fcef",
"on-secondary": "#ffffff",
"inverse-surface": "#2a332a",
"error": "#ba1a1a",
"primary-fixed-dim": "#3de273",
"tertiary-fixed-dim": "#ffb59b",
"text-secondary": "#64748B",
"on-error-container": "#93000a",
"surface-card": "#FFFFFF",
"on-primary-fixed": "#002109",
"inverse-primary": "#3de273",
"border-subtle": "#E2E8F0",
"on-secondary-fixed": "#00201c",
"primary-fixed": "#66ff8e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-margin": "32px",
"sidebar-width": "260px",
"card-padding": "20px",
"gutter": "24px",
"base": "8px",
"toolbar-height": "64px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"title-sm": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"mono-code": ["jetbrainsMono"]
},
"fontSize": {
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
background-color: #F8F9FA;
font-family: 'Inter', sans-serif;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.otp-input:focus {
border-color: #006d2f;
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2);
outline: none;
}
</style>
</head>
<body class="bg-background-main flex items-center justify-center min-h-screen p-container-margin">
<!-- Auth Shell Suppression: No TopNavBar or SideNavBar for focused transactional screen -->
<main class="w-full max-w-[480px]">
<!-- Branding Header -->
<div class="flex flex-col items-center mb-base text-center">
<div class="w-16 h-16 bg-primary-container rounded-xl flex items-center justify-center mb-6 shadow-sm">
<span class="material-symbols-outlined text-on-primary-container !text-4xl" data-icon="lock_person">lock_person</span>
</div>
<h1 class="font-headline-md text-headline-md text-text-primary mb-2">WhatsApp Business Admin</h1>
<p class="font-body-md text-body-md text-text-secondary">Enterprise API Secure Access</p>
</div>
<!-- 2FA Verification Card -->
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] p-10 border border-outline-variant/30">
<div class="mb-8 text-center">
<h2 class="font-title-sm text-title-sm text-text-primary mb-3">Two-Factor Authentication</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Open your <strong>Google Authenticator</strong> app and enter the 6-digit verification code below to verify your identity.
</p>
</div>
<!-- Verification Inputs -->
<form action="#" class="space-y-8" method="POST">
<div class="flex justify-between gap-2 md:gap-3" id="otp-container">
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
<input class="otp-input w-12 h-14 md:w-14 md:h-16 text-center text-2xl font-bold bg-surface-container-lowest border border-outline-variant rounded-lg transition-all" inputmode="numeric" maxlength="1" pattern="\d*" required="" type="text"/>
</div>
<div class="space-y-4">
<button class="w-full bg-primary-container text-on-primary-container font-headline-md py-4 rounded-lg hover:brightness-95 active:scale-[0.98] transition-all shadow-sm" type="submit">
Verify Code
</button>
<div class="flex items-center justify-between px-1">
<button class="flex items-center gap-2 font-label-caps text-label-caps text-primary hover:underline group" type="button">
<span class="material-symbols-outlined !text-sm group-hover:-translate-x-0.5 transition-transform" data-icon="arrow_back">arrow_back</span>
Back to Login
</button>
<button class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" type="button">
Need help?
</button>
</div>
</div>
</form>
</div>
<!-- Footer Visual Reference (Mock App Interface Preview) -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-gutter opacity-90">
<div class="bg-surface-container rounded-xl p-6 border border-outline-variant/20 flex items-start gap-4">
<div class="bg-surface-card p-2 rounded-lg shadow-sm">
<span class="material-symbols-outlined text-primary" data-icon="smartphone">smartphone</span>
</div>
<div>
<h3 class="font-label-caps text-label-caps text-text-primary mb-1">GOOGLE AUTHENTICATOR</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant leading-tight">Generate secure codes even when your phone is offline.</p>
</div>
</div>
<div class="bg-surface-container rounded-xl p-6 border border-outline-variant/20 flex items-start gap-4">
<div class="bg-surface-card p-2 rounded-lg shadow-sm">
<span class="material-symbols-outlined text-primary" data-icon="verified_user">verified_user</span>
</div>
<div>
<h3 class="font-label-caps text-label-caps text-text-primary mb-1">ENTERPRISE SECURITY</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant leading-tight">Your account is protected by mandatory 2FA protocols.</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<img alt="Security Illustration" class="mx-auto w-32 h-auto opacity-40 grayscale hover:grayscale-0 transition-all duration-500" data-alt="A professional clean minimalist security illustration showing a protected digital vault with subtle green lighting accents. The image has a high-end enterprise SaaS aesthetic with white and soft gray background tones and a modern corporate vibe. Soft ambient shadows and vector precision create a mood of reliability and technical sophistication." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5pe04Qhs8JdZfqsjDGPY981PgmRRgALMeqWuTUlNAWk16r3bt5ad4S6AFmm5_i_f2qbrSg-LUR525G1p6lzYdZ7PLm5j5aBes7s-0u-ET2UL-BViZko-uYy4Eo7NNJ5wnxFfUUx9AtGEYSP9G_iz-8_IF-flP6GrQ2Z_ZSDbj0UC9xatsKsh4F95TS0L12uqhu91f-xOfMDc68PMJ6rb73GPThFxHYWyuKFv_TwqF2YY2MQky_Q8KDcC0xV6npdi9WYoNivyh5fU"/>
</div>
</main>
<!-- Contextual Decorative Elements -->
<div class="fixed top-0 left-0 w-full h-1 bg-gradient-to-r from-primary/20 via-primary-container to-primary/20"></div>
</body></html>

BIN
stitch_bizone/2fa_verification_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

171
stitch_bizone/admin_dashboard_system/DESIGN.md Normal file
View File

@ -0,0 +1,171 @@
---
name: Admin Dashboard System
colors:
surface: '#faf8fd'
surface-dim: '#dbd9dd'
surface-bright: '#faf8fd'
surface-container-lowest: '#ffffff'
surface-container-low: '#f5f3f7'
surface-container: '#efedf1'
surface-container-high: '#e9e7ec'
surface-container-highest: '#e3e2e6'
on-surface: '#1b1b1f'
on-surface-variant: '#44474f'
inverse-surface: '#303033'
inverse-on-surface: '#f2f0f4'
outline: '#75777f'
outline-variant: '#c5c6d0'
surface-tint: '#495e8a'
primary: '#00020a'
on-primary: '#ffffff'
primary-container: '#001b44'
on-primary-container: '#7084b3'
inverse-primary: '#b1c6f9'
secondary: '#00658d'
on-secondary: '#ffffff'
secondary-container: '#2dbcfe'
on-secondary-container: '#004866'
tertiary: '#080100'
on-tertiary: '#ffffff'
tertiary-container: '#381000'
on-tertiary-container: '#b67558'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#d8e2ff'
primary-fixed-dim: '#b1c6f9'
on-primary-fixed: '#001a42'
on-primary-fixed-variant: '#314671'
secondary-fixed: '#c6e7ff'
secondary-fixed-dim: '#82cfff'
on-secondary-fixed: '#001e2d'
on-secondary-fixed-variant: '#004c6b'
tertiary-fixed: '#ffdbcd'
tertiary-fixed-dim: '#ffb596'
on-tertiary-fixed: '#360f00'
on-tertiary-fixed-variant: '#6d3920'
background: '#faf8fd'
on-background: '#1b1b1f'
surface-variant: '#e3e2e6'
typography:
display-lg:
fontFamily: Plus Jakarta Sans
fontSize: 36px
fontWeight: '700'
lineHeight: 44px
letterSpacing: -0.02em
headline-md:
fontFamily: Plus Jakarta Sans
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
letterSpacing: -0.01em
title-lg:
fontFamily: Plus Jakarta Sans
fontSize: 18px
fontWeight: '600'
lineHeight: 24px
body-md:
fontFamily: Plus Jakarta Sans
fontSize: 16px
fontWeight: '400'
lineHeight: 24px
body-sm:
fontFamily: Plus Jakarta Sans
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
label-md:
fontFamily: Plus Jakarta Sans
fontSize: 12px
fontWeight: '600'
lineHeight: 16px
letterSpacing: 0.05em
headline-md-mobile:
fontFamily: Plus Jakarta Sans
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
unit: 4px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 40px
gutter: 24px
margin-page: 32px
---
## Brand & Style
This design system transitions the WhatsApp Business experience from a casual communication tool into a high-performance Enterprise SaaS platform. The aesthetic is **Corporate Modern**, prioritizing clarity, data density, and professional trust.
By replacing the traditional green with a deep navy and electric cyan palette, the UI evokes stability and technological precision. The style uses a "Quiet Interface" approach: neutral surfaces and subtle borders allow data visualizations and message content to take center stage, while the cyan accent provides high-visibility cues for primary actions and notifications.
**Target Audience:** Business administrators, customer success managers, and operations leads who require a focused, high-productivity environment for managing large-scale communications.
## Colors
The palette is anchored by **Deep Navy (#001B44)**, used for structural elements like sidebars and primary headings to establish authority. **Cyan (#00AEEF)** serves as the high-energy accent for interactivity, progress bars, and active states.
- **Primary:** Use Navy for the highest level of hierarchy and navigation backgrounds.
- **Secondary:** Use Cyan for primary buttons, selection states, and "new message" indicators.
- **Surface:** The background uses a cool-toned Slate gray to reduce eye strain compared to pure white.
- **Functional:** Standard semantic colors are adjusted for high legibility against the navy/white background, ensuring status indicators (online, pending, failed) are immediately recognizable.
## Typography
This design system utilizes **Plus Jakarta Sans** across all levels to maintain a contemporary, approachable, yet geometric look.
- **Headlines:** Use Bold weights (700) with slight negative letter-spacing for a compact, "SaaS-ready" appearance in headers and dashboard widgets.
- **Body Text:** Standardized at 16px for readability, with 14px used for secondary metadata in message lists and audit logs.
- **Labels:** Uppercase labels with increased letter-spacing should be used for table headers and small category tags to differentiate them from actionable text.
- **Contrast:** Ensure all text on Navy backgrounds uses White or Cyan-tinted grays to maintain WCAG AA compliance.
## Layout & Spacing
The design system employs a **12-column fluid grid** for the main dashboard view, allowing widgets to reflow based on screen width.
- **Sidebar:** A fixed-width (280px) vertical navigation bar anchored to the left, utilizing the Deep Navy palette.
- **Gutter System:** A consistent 24px (lg) gutter is maintained between dashboard cards to create clear visual separation.
- **Density:** For data-heavy views (like the "All Chats" list), vertical padding is reduced to 8px (sm) to maximize information density without sacrificing touch targets.
- **Mobile:** On devices < 768px, the sidebar collapses into a bottom navigation bar or a hamburger menu, and page margins reduce to 16px.
## Elevation & Depth
To maintain a clean SaaS aesthetic, this design system avoids heavy shadows, instead relying on **Tonal Layers** and **Low-Contrast Outlines**.
- **Level 0 (Canvas):** The base background layer (#F8FAFC).
- **Level 1 (Cards):** Dashboard widgets and chat containers use a white background with a subtle 1px border (#E2E8F0). No shadow.
- **Level 2 (Dropdowns/Modals):** Elements that float above the UI use a soft, ambient shadow (10% opacity Navy) and a slightly thicker border to indicate focus.
- **Active State:** Cyan is used as a 2px "glow" or border-left accent to denote selected items in a list or active input fields.
## Shapes
The shape language is consistently **Rounded**, providing a friendlier contrast to the professional navy color palette.
- **Standard Elements:** Buttons, input fields, and dashboard cards use a 0.5rem (8px) radius.
- **Large Elements:** Modals and large containers use 1rem (16px) for a soft, modern feel.
- **Interactive Indicators:** Small badges and notification counters use a fully pill-shaped (rounded-full) geometry to stand out as distinct interactive units.
## Components
- **Buttons:**
- *Primary:* Navy background with White text for high-impact actions.
- *Accent:* Cyan background with Navy text for secondary "Call to Action" items.
- *Ghost:* No background, Navy border and text for utility actions.
- **Chat Bubbles:**
- *Incoming:* Light gray (#F1F5F9) with Navy text.
- *Outgoing:* Deep Navy (#001B44) with White text, using Cyan for "Read" receipts.
- **Input Fields:** 1px Slate border (#CBD5E1), turning Cyan on focus. Includes a 4px inner padding for a spacious feel.
- **Chips & Tags:** Small, low-saturation backgrounds (e.g., light cyan or light navy) with high-contrast text to categorize "New Leads," "Support," or "Billing" without cluttering the UI.
- **Sidebar Nav:** High-contrast Navy background with Cyan icons for the active state to ensure the navigation is the primary anchor of the layout.

87
stitch_bizone/login_whatsapp_business_admin/code.html → stitch_bizone/all_chats_bizone_standard_layout/code.html
View File

@ -7,13 +7,15 @@
<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;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": "#001b44",
"primary-light": "#003380",
"accent-blue": "#00a3ff",
"outline": "#6c7b6b",
"surface-container-lowest": "#ffffff",
"on-tertiary": "#ffffff",
@ -47,9 +49,8 @@
"on-background": "#151e16",
"status-warning": "#F59E0B",
"error-container": "#ffdad6",
"primary-container": "#25d366",
"surface-tint": "#006d2f",
"primary": "#006d2f",
"primary-container": "#001b44",
"surface-tint": "#001b44",
"on-tertiary-fixed-variant": "#763319",
"on-surface": "#151e16",
"secondary-container": "#8cf1e1",
@ -83,7 +84,7 @@
"card-padding": "20px",
"gutter": "24px",
"base": "8px",
"toolbar-height": "64px"
"toolbar-height": "72px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
@ -116,12 +117,45 @@
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center font-body-md text-on-surface p-4">
<!-- Login Container -->
<main class="w-full max-w-[440px] flex flex-col gap-8">
<body class="min-h-screen flex font-body-md text-on-surface">
<!-- Sidebar (Layout Standard per SCREEN_38) -->
<aside class="w-[sidebar-width] bg-primary h-screen flex flex-col shrink-0">
<!-- Sidebar Header -->
<div class="h-[toolbar-height] bg-white flex items-center px-6 shrink-0 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-grow pt-8 px-4 flex flex-col gap-2">
<div class="w-full h-10 rounded-lg bg-accent-blue/10 flex items-center px-4 text-accent-blue gap-3 cursor-pointer">
<span class="material-symbols-outlined text-[20px]" data-icon="login">login</span>
<span class="font-body-sm font-semibold">Login</span>
</div>
<div class="w-full h-10 rounded-lg hover:bg-white/5 flex items-center px-4 text-white/70 gap-3 cursor-pointer transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="help">help</span>
<span class="font-body-sm">Support</span>
</div>
</nav>
</aside>
<!-- Main Content Area -->
<div class="flex-grow flex flex-col">
<!-- TopBar (Layout Standard per SCREEN_38) -->
<header class="h-[toolbar-height] bg-white border-b border-outline-variant flex items-center justify-end px-8">
<div class="flex items-center gap-4">
<button class="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="translate">translate</span>
</button>
<div class="h-8 w-[1px] bg-outline-variant"></div>
<button class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant hover:bg-surface-container-low transition-colors">
<span class="font-body-sm font-semibold">Help Center</span>
</button>
</div>
</header>
<!-- Main Login Content -->
<main class="flex-grow flex items-center justify-center p-4">
<div class="w-full max-w-[440px] flex flex-col gap-8">
<!-- Brand Header Section -->
<div class="flex flex-col items-center text-center gap-4">
<div class="w-16 h-16 bg-primary-container rounded-xl flex items-center justify-center shadow-sm">
<div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center shadow-md">
<span class="material-symbols-outlined text-[40px] text-white" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
</div>
<div class="flex flex-col gap-1">
@ -130,7 +164,7 @@
</div>
</div>
<!-- Login Card -->
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] p-10 flex flex-col gap-6">
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] p-10 flex flex-col gap-6 border border-border-subtle">
<form action="#" class="flex flex-col gap-6" method="POST">
<!-- Email Field -->
<div class="flex flex-col gap-2">
@ -139,20 +173,20 @@
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline-variant" data-icon="mail">mail</span>
</div>
<input class="w-full pl-10 pr-4 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all font-body-sm placeholder:text-outline-variant" id="email" name="email" placeholder="admin@enterprise.com" required="" type="email"/>
<input class="w-full pl-10 pr-4 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-accent-blue focus:border-accent-blue outline-none transition-all font-body-sm placeholder:text-outline-variant" id="email" name="email" placeholder="admin@enterprise.com" required="" type="email"/>
</div>
</div>
<!-- Password Field -->
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center">
<label class="font-label-caps text-label-caps text-on-surface-variant" for="password">PASSWORD</label>
<a class="font-body-sm text-body-sm text-primary hover:underline" href="#">Forgot password?</a>
<a class="font-body-sm text-body-sm text-accent-blue hover:underline" href="#">Forgot password?</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline-variant" data-icon="lock">lock</span>
</div>
<input class="w-full pl-10 pr-12 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all font-body-sm placeholder:text-outline-variant" id="password" name="password" placeholder="••••••••" required="" type="password"/>
<input class="w-full pl-10 pr-12 py-3 bg-white border border-outline-variant rounded-lg focus:ring-2 focus:ring-accent-blue focus:border-accent-blue outline-none transition-all font-body-sm placeholder:text-outline-variant" id="password" name="password" placeholder="••••••••" required="" type="password"/>
<button class="absolute inset-y-0 right-0 pr-3 flex items-center text-outline-variant hover:text-on-surface-variant" type="button">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
@ -161,14 +195,14 @@
<!-- Options -->
<div class="flex items-center">
<label class="flex items-center cursor-pointer group">
<input class="w-5 h-5 rounded border-outline-variant text-primary focus:ring-primary transition-all cursor-pointer" type="checkbox"/>
<input class="w-5 h-5 rounded border-outline-variant text-accent-blue focus:ring-accent-blue transition-all cursor-pointer" type="checkbox"/>
<span class="ml-3 font-body-sm text-body-sm text-on-surface-variant group-hover:text-on-surface">Remember me on this device</span>
</label>
</div>
<!-- Login Button -->
<button class="w-full bg-status-success text-white py-3.5 px-6 rounded-lg font-title-sm text-title-sm hover:brightness-95 active:scale-[0.98] transition-all flex items-center justify-center gap-2 shadow-md" type="submit">
Login
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
<button class="w-full bg-primary hover:bg-primary-light text-white py-3.5 px-6 rounded-lg font-title-sm text-title-sm active:scale-[0.98] transition-all flex items-center justify-center gap-2 shadow-md" type="submit">
Login
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
</form>
<!-- Divider -->
@ -181,18 +215,18 @@
<div class="grid grid-cols-2 gap-4">
<button class="flex items-center justify-center gap-2 py-2.5 px-4 border border-outline-variant rounded-lg hover:bg-surface-container-low transition-colors font-body-sm text-on-surface">
<img alt="Google Logo" class="w-5 h-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEC-LHezB1AcHz3tXX50q_uaRaZWABYnQ0g3OIPLvQNnRb0k8zRQDCXhBBoNvIx8-WPupeVMC3Ki2g0NR-aAVdzwoIcVcn1aMyxUZ1dQUehIZdMALB3YbjMvOous8kcuk6H-clYjzolZgukVPqg_XsAOrkKpyClnPQfgws63zje2Tf1dUCdImZPQDj20S33sPXwHlxedy_k3Y-cn2mWb6r9Rn9Ejx_Li31nkGfR46d6kB6NBU_x_-EyzSxyEPMgZ1pMWTZ6_knQkU"/>
Google
</button>
Google
</button>
<button class="flex items-center justify-center gap-2 py-2.5 px-4 border border-outline-variant rounded-lg hover:bg-surface-container-low transition-colors font-body-sm text-on-surface">
<span class="material-symbols-outlined text-on-surface" data-icon="key">key</span>
SSO
</button>
SSO
</button>
</div>
</div>
<!-- Footer Help -->
<footer class="flex flex-col items-center gap-4">
<p class="font-body-sm text-body-sm text-on-surface-variant">
New to WhatsApp Business? <a class="text-primary font-semibold hover:underline" href="#">Apply for API access</a>
New to WhatsApp Business? <a class="text-accent-blue font-semibold hover:underline" href="#">Apply for API access</a>
</p>
<div class="flex gap-6">
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">PRIVACY POLICY</a>
@ -200,12 +234,11 @@
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">HELP CENTER</a>
</div>
</footer>
</div>
</main>
<!-- Visual Background Element (Subtle) -->
<div class="fixed top-0 right-0 p-12 -z-10 opacity-10 hidden lg:block">
</div>
<!-- Visual Background Element (Subtle, repurposed for brand) -->
<div class="fixed top-24 right-0 p-12 -z-10 opacity-[0.03] hidden lg:block">
<span class="material-symbols-outlined text-[320px] text-primary" data-icon="hub">hub</span>
</div>
<div class="fixed bottom-0 left-0 p-12 -z-10 opacity-10 hidden lg:block">
<span class="material-symbols-outlined text-[320px] text-primary" data-icon="security_update_good">security_update_good</span>
</div>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

380
stitch_bizone/api_settings_whatsapp_business_admin/code.html
View File

@ -1,380 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WhatsApp Business API Settings</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": {
"on-primary-fixed-variant": "#005322",
"tertiary": "#93492e",
"outline-variant": "#bbcbb9",
"surface-container-low": "#edf6e9",
"surface-card": "#FFFFFF",
"on-background": "#151e16",
"inverse-primary": "#3de273",
"on-tertiary": "#ffffff",
"on-error-container": "#93000a",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-container": "#ffa07e",
"primary-fixed": "#66ff8e",
"secondary-fixed": "#8ff4e3",
"on-surface-variant": "#3c4a3d",
"on-primary-container": "#005523",
"surface-bright": "#f3fcef",
"status-error": "#EF4444",
"on-tertiary-fixed": "#380d00",
"surface-variant": "#dce5d8",
"on-primary-fixed": "#002109",
"background": "#f3fcef",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary": "#ffffff",
"secondary-container": "#8cf1e1",
"surface": "#f3fcef",
"primary-fixed-dim": "#3de273",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface-tint": "#006d2f",
"secondary-fixed-dim": "#72d8c8",
"primary-container": "#25d366",
"inverse-surface": "#2a332a",
"on-secondary": "#ffffff",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"status-info": "#3B82F6",
"surface-container-high": "#e2ebde",
"border-subtle": "#E2E8F0",
"secondary": "#006b5f",
"text-secondary": "#64748B",
"tertiary-fixed": "#ffdbcf",
"inverse-on-surface": "#eaf3e6",
"surface-container-lowest": "#ffffff",
"surface-container": "#e7f1e4",
"status-success": "#25D366",
"error-container": "#ffdad6",
"surface-dim": "#d3ddd0",
"on-error": "#ffffff",
"background-main": "#F8F9FA",
"outline": "#6c7b6b",
"on-secondary-fixed-variant": "#005047",
"text-primary": "#1A1C1E",
"surface-container-highest": "#dce5d8",
"on-secondary-fixed": "#00201c",
"status-warning": "#F59E0B"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"toolbar-height": "64px",
"card-padding": "20px",
"base": "8px",
"sidebar-width": "260px",
"gutter": "24px",
"container-margin": "32px"
},
"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;
vertical-align: middle;
}
body { font-family: 'Inter', sans-serif; background-color: #f3fcef; }
.sidebar-active { background-color: #e7f1e4; color: #006d2f; font-weight: 700; }
.glass-panel { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.05); }
</style>
</head>
<body class="bg-surface 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-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-grow space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="font-body-md text-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
<span class="font-body-md text-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
<span class="font-body-md text-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="font-body-md text-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
<span class="font-body-md text-body-md">Webhooks</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span class="font-body-md text-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary font-bold bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-body-md text-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 space-y-1 border-t border-surface-variant">
<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary text-on-primary mb-4 shadow-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined" data-icon="add">add</span>
<span class="font-body-md text-body-md">New Broadcast</span>
</button>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
<span class="font-body-md text-body-md">Help Center</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span class="font-body-md text-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-4">
<h2 class="font-headline-md text-headline-md font-bold text-primary">Admin Dashboard</h2>
<div class="h-6 w-px bg-outline-variant mx-2"></div>
<div class="relative group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
<input class="pl-10 pr-4 py-1.5 rounded-full border-none bg-surface-container bg-opacity-50 focus:bg-white focus:ring-2 focus:ring-primary-container w-64 transition-all outline-none text-body-sm" placeholder="Search config..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 text-on-surface-variant">
<a class="font-title-sm text-title-sm text-primary font-bold border-b-2 border-primary" href="#">English</a>
<a class="font-title-sm text-title-sm hover:text-primary transition-all" href="#">Bahasa</a>
</div>
<div class="flex items-center gap-3">
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-on-surface-variant" data-icon="notifications">notifications</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-on-surface-variant" data-icon="settings">settings</span>
</button>
</div>
<div class="h-8 w-8 rounded-full bg-secondary-container overflow-hidden">
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhN416SlPhrhQpm6J6tEPF71baFUh9BA3jqHManUkIU7LEYQbfuL6AMZCuBAyWj2XS1JkK0_oifw4lmjy-V-jBQsYJq5k3uAoyeiJMXnnZ9B4gSZC_t9YO9qvVscNRW5Gqy9uUEyOckMaKmqlRNF9DKT1ykVpBSOLkWTXgGa9b58dj3eiYJ5URyvFSC653Js0J--JanVHXBxCSwtbvdq32Vh699lnR0khXOoQpltp8yCwauYcfPXWP60-t3pgFELH3rL4eEWZBtG8"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="pt-[96px] pb-12 ml-[260px] px-container-margin min-h-screen">
<div class="max-w-7xl mx-auto">
<div class="mb-8 flex justify-between items-end">
<div>
<h1 class="font-display-lg text-display-lg text-on-surface">API Settings</h1>
<p class="text-on-surface-variant font-body-md mt-1">Configure your WhatsApp Business Platform integration and credentials.</p>
</div>
<div class="flex gap-3">
<button class="px-6 py-2.5 border border-outline rounded-lg font-body-md hover:bg-surface-container-low transition-colors">Discard Changes</button>
<button class="px-6 py-2.5 bg-primary text-on-primary rounded-lg font-body-md shadow-sm hover:opacity-90 transition-opacity">Save Configuration</button>
</div>
</div>
<div class="grid grid-cols-12 gap-8">
<!-- Left Column: Main Configuration -->
<div class="col-span-12 lg:col-span-8 space-y-8">
<!-- API Credentials Card -->
<section class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
<div class="flex items-center gap-2 mb-6">
<span class="material-symbols-outlined text-primary" data-icon="key">key</span>
<h3 class="font-title-sm text-title-sm text-on-surface">Primary Credentials</h3>
</div>
<div class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="font-label-caps text-label-caps text-on-surface-variant block">PHONE NUMBER ID</label>
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="105829384729103"/>
</div>
<div class="space-y-2">
<label class="font-label-caps text-label-caps text-on-surface-variant block">WHATSAPP BUSINESS ACCOUNT ID</label>
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="294810293847562"/>
</div>
</div>
<div class="space-y-2">
<label class="font-label-caps text-label-caps text-on-surface-variant block">SYSTEM USER ACCESS TOKEN</label>
<div class="relative">
<input class="w-full p-3 pr-24 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="password" value="EAAQZA8ZCs2ZBo0BAKZCe9Tq..."/>
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex gap-2">
<button class="text-primary font-label-caps">SHOW</button>
<button class="text-primary font-label-caps">COPY</button>
</div>
</div>
<p class="text-body-sm text-on-surface-variant mt-2 italic flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]" data-icon="info">info</span>
Expires in 58 days.
</p>
</div>
</div>
</section>
<!-- Webhook Configuration -->
<section class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
<div class="flex items-center gap-2 mb-6">
<span class="material-symbols-outlined text-primary" data-icon="webhook">webhook</span>
<h3 class="font-title-sm text-title-sm text-on-surface">Webhook Configuration</h3>
</div>
<div class="space-y-6">
<div class="space-y-2">
<label class="font-label-caps text-label-caps text-on-surface-variant block">CALLBACK URL</label>
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-body-sm" placeholder="https://your-server.com/webhooks/whatsapp" type="text"/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="font-label-caps text-label-caps text-on-surface-variant block">VERIFY TOKEN</label>
<input class="w-full p-3 rounded-lg border border-outline-variant bg-surface focus:ring-2 focus:ring-primary-container outline-none font-mono-code text-body-sm" type="text" value="WHATSAPP_SECRET_VERIFY_2024"/>
</div>
<div class="flex items-end">
<button class="w-full py-3 bg-surface-container-low text-primary font-title-sm rounded-lg hover:bg-surface-container-high transition-colors">Test Webhook Connectivity</button>
</div>
</div>
</div>
</section>
<!-- Feature Toggles Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-black border-opacity-[0.03] flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="h-10 w-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
<span class="material-symbols-outlined" data-icon="done_all">done_all</span>
</div>
<div>
<h4 class="font-title-sm text-on-surface">Read Receipts</h4>
<p class="text-body-sm text-on-surface-variant">Track message delivery</p>
</div>
</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-surface-variant 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-primary"></div>
</label>
</div>
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-black border-opacity-[0.03] flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="h-10 w-10 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined" data-icon="reply">reply</span>
</div>
<div>
<h4 class="font-title-sm text-on-surface">Auto-reply</h4>
<p class="text-body-sm text-on-surface-variant">Bot automation active</p>
</div>
</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-surface-variant 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-primary"></div>
</label>
</div>
</div>
</div>
<!-- Right Column: Status & Sidebar Info -->
<aside class="col-span-12 lg:col-span-4 space-y-6">
<!-- Status Card -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-black border-opacity-[0.03] overflow-hidden">
<div class="p-6 bg-primary-container text-on-primary-container flex justify-between items-center">
<div>
<p class="font-label-caps opacity-80">API STATUS</p>
<h3 class="font-headline-md font-bold">Connected</h3>
</div>
<span class="material-symbols-outlined text-[48px]" data-icon="cloud_done">cloud_done</span>
</div>
<div class="p-6 space-y-4">
<div class="flex justify-between items-center text-body-sm">
<span class="text-on-surface-variant">Latency</span>
<span class="font-bold text-status-success">124ms</span>
</div>
<div class="flex justify-between items-center text-body-sm">
<span class="text-on-surface-variant">Uptime (30d)</span>
<span class="font-bold">99.98%</span>
</div>
<div class="flex justify-between items-center text-body-sm">
<span class="text-on-surface-variant">Last Pulse</span>
<span class="font-bold">Just now</span>
</div>
</div>
</div>
<!-- Usage Limits Card -->
<div class="bg-surface-container-lowest rounded-xl p-card-padding shadow-sm border border-black border-opacity-[0.03]">
<h3 class="font-title-sm text-on-surface mb-6">Messaging Tier Limits</h3>
<div class="space-y-6">
<div>
<div class="flex justify-between text-body-sm mb-2">
<span class="text-on-surface-variant">Daily Capacity</span>
<span class="font-bold">100,000 users</span>
</div>
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full w-[45%]"></div>
</div>
<p class="text-[12px] text-on-surface-variant mt-2">45,200/100,000 unique users reached</p>
</div>
<div>
<div class="flex justify-between text-body-sm mb-2">
<span class="text-on-surface-variant">Tier Upgrade Progress</span>
<span class="font-bold text-primary">TIER 2</span>
</div>
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
<div class="h-full bg-secondary rounded-full w-[85%]"></div>
</div>
<p class="text-[12px] text-on-surface-variant mt-2">Next tier: Unlimited messaging</p>
</div>
</div>
</div>
<!-- Documentation Mini-card -->
<div class="bg-tertiary-container text-on-tertiary-container rounded-xl p-card-padding shadow-sm relative overflow-hidden group">
<div class="relative z-10">
<h3 class="font-title-sm mb-2">Developer Docs</h3>
<p class="text-body-sm opacity-90 mb-4">Need help with technical implementation? Check our latest API documentation.</p>
<a class="inline-flex items-center gap-2 font-bold hover:underline" href="#">
Read Reference
<span class="material-symbols-outlined text-[18px]" data-icon="open_in_new">open_in_new</span>
</a>
</div>
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-[120px] opacity-10 rotate-12" data-icon="menu_book">menu_book</span>
</div>
<!-- Help Section -->
<div class="p-6 border-2 border-dashed border-outline-variant rounded-xl text-center">
<img alt="Technical Support" class="mx-auto mb-4 grayscale opacity-50" data-alt="A detailed black and white illustration of professional technical maintenance tools like a wrench and a gear, arranged symmetrically in a clean, minimalist style suitable for a corporate SaaS help section. The lighting is soft and centered." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0dUSfrnQtMQ1gOIcopoR1-MYImR-ET_MVBW_5Wr9q6PAkJ1vIxSclyczo_bgPxerdu_WDCMP3pHywjwkeCyaUAogIjHAS6WtE4Z_-a4ioKvJl3lRO3J_IJE6kYUG2gHeGdRlvQpiQLGRIFeiiD-whRIwjIy-3_iiTivNHCWw9Z1HlpuMQcpe6ArvY-8-122b2feZyaM74WshkovFHDZH9SkQXzUFMUGGI4HEuff3ni4gthvmHGNNtbOOMqjFJ47d_bLBXS_7CEMw"/>
<h4 class="font-title-sm text-on-surface">Stuck with API?</h4>
<p class="text-body-sm text-on-surface-variant mt-1 mb-4">Our engineering team is available for technical support.</p>
<button class="text-primary font-bold hover:underline">Chat with Support</button>
</div>
</aside>
</div>
</div>
</main>
</body></html>

BIN
stitch_bizone/api_settings_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 380 KiB

395
stitch_bizone/audit_trail_bizone_standard_layout/code.html Normal file
View File

@ -0,0 +1,395 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Audit Trail | 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;500;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": {
"primary": "#001b44",
"brand-navy": "#001b44",
"brand-blue": "#00a3ff",
"surface-container-high": "#e2ebde",
"error": "#ba1a1a",
"secondary": "#006b5f",
"tertiary": "#93492e",
"surface-container-highest": "#dce5d8",
"surface-container": "#e7f1e4",
"on-surface": "#151e16",
"surface": "#ffffff",
"background": "#f8f9fa",
"on-error": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-success": "#25D366",
"surface-card": "#FFFFFF",
"surface-variant": "#dce5d8",
"surface-bright": "#f3fcef",
"inverse-on-surface": "#eaf3e6",
"border-subtle": "#E2E8F0",
"on-primary": "#ffffff",
"status-warning": "#F59E0B",
"text-primary": "#1A1C1E",
"outline": "#6c7b6b",
"outline-variant": "#bbcbb9",
"on-background": "#151e16",
"status-error": "#EF4444",
"text-secondary": "#64748B",
"inverse-surface": "#2a332a",
"surface-container-low": "#edf6e9"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"toolbar-height": "72px",
"sidebar-width": "260px",
"base": "8px",
"gutter": "24px",
"container-margin": "32px",
"card-padding": "20px"
},
"fontFamily": {
"title-sm": ["Plus Jakarta Sans"],
"display-lg": ["Plus Jakarta Sans"],
"mono-code": ["JetBrains Mono"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"headline-md": ["Plus Jakarta Sans"]
}
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sidebar-item-active {
font-variation-settings: 'FILL' 1;
}
</style>
</head>
<body class="bg-background text-on-background">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-screen w-[260px] bg-brand-navy z-50 flex flex-col shadow-xl">
<!-- Sidebar Header with White Background and 72px Height -->
<div class="h-[72px] bg-white flex items-center px-6 border-b border-gray-100">
<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 -->
<div class="flex-1 flex flex-col px-4 pt-8 gap-2">
<button class="mb-6 flex items-center justify-center gap-2 bg-brand-blue text-white font-semibold py-3 px-4 rounded-lg active:scale-95 transition-transform duration-150 shadow-md">
<span class="material-symbols-outlined">add</span>
<span>New Message</span>
</button>
<nav class="flex-1 flex flex-col gap-1">
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="text-sm font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
<span class="text-sm font-medium">Conversations</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="text-sm font-medium">Templates</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
<span class="text-sm font-medium">Webhooks</span>
</a>
<a class="flex items-center gap-3 bg-brand-blue text-white rounded-lg px-4 py-3 font-bold transition-all shadow-sm" href="#">
<span class="material-symbols-outlined sidebar-item-active" data-icon="monitoring" style="font-variation-settings: 'FILL' 1;">monitoring</span>
<span class="text-sm font-medium">Analytics</span>
</a>
</nav>
<div class="mt-auto pb-6 flex flex-col gap-1 border-t border-white/10 pt-4">
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="text-sm font-medium">Settings</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 rounded-lg hover:bg-white/10 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span class="text-sm font-medium">Logout</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-[260px] min-h-screen flex flex-col">
<!-- TopNavBar (72px Height, White) -->
<header class="h-[72px] bg-white border-b border-gray-200 sticky top-0 z-40 flex justify-between items-center px-container-margin w-full">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-brand-blue text-sm" placeholder="Search logs, admin names..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-2 text-brand-navy font-bold">
<span class="text-lg font-semibold">BizOne Admin Gateway</span>
</div>
<div class="flex items-center gap-2">
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
<button class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="help">help</span>
</button>
<div class="ml-2 w-8 h-8 rounded-full bg-gray-200 overflow-hidden border border-gray-300">
<img alt="Admin Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUrN5_CQ78_xrZetx1pEZQKYfGcn6GTjS-CvQTWThIPlv9_2FDownQZTy9uLqcqgE7GaF9s4CjTgKOSVj0eekpZPBlq9vgjnrRZPZsgYuie-EsUmc0wdFhp87pyKPtjVOrxvDrwo9N2CFBUcKckw8eyDoasa_xuyzFtwurZ7GtdWytv0fG59VVXJqW-S-sTLokrmBR5x52MzkHwo19f0pEZgxLYbMeEi_wOu_MnjF0ZPqOICyeVqW2laOV7mZGKhP1_xXiCFuLqZ4"/>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="p-container-margin flex-1 flex flex-col gap-8">
<!-- Page Header -->
<div class="flex justify-between items-end">
<div>
<h2 class="text-3xl font-bold text-brand-navy">Audit Trail</h2>
<p class="text-gray-500">Monitor administrative actions and system modifications.</p>
</div>
<button class="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-semibold text-brand-navy hover:bg-gray-50 transition-all shadow-sm">
<span class="material-symbols-outlined text-[20px]">download</span>
<span>Export Logs</span>
</button>
</div>
<!-- Summary KPI Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<!-- Card 1 -->
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
<div class="flex justify-between items-start">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">TOTAL ACTIONS (LAST 24H)</span>
<span class="material-symbols-outlined text-brand-blue">history</span>
</div>
<div class="flex items-end gap-3 mt-1">
<span class="text-3xl font-bold text-brand-navy">1,284</span>
<span class="text-status-success text-xs font-bold flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
12.5%
</span>
</div>
<div class="mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-brand-blue w-3/4"></div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
<div class="flex justify-between items-start">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">SECURITY ALERTS</span>
<span class="material-symbols-outlined text-error">security</span>
</div>
<div class="flex items-end gap-3 mt-1">
<span class="text-3xl font-bold text-brand-navy">03</span>
<span class="text-status-error text-xs font-bold flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]">priority_high</span>
Critical
</span>
</div>
<p class="text-sm text-gray-500 mt-2">Multiple failed login attempts detected.</p>
</div>
<!-- Card 3 -->
<div class="bg-white p-card-padding rounded-xl shadow-sm border border-gray-200 flex flex-col gap-2">
<div class="flex justify-between items-start">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">MOST ACTIVE ADMIN</span>
<span class="material-symbols-outlined text-brand-blue">person</span>
</div>
<div class="flex items-center gap-3 mt-1">
<div class="w-10 h-10 rounded-full overflow-hidden border border-gray-200">
<img alt="John Smith" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjFc96_LGXMzZhz_zZ3SXLOlABLEBptLJWDxdD8smQzOVENJ8vGBNxzS0jUGzntlpuY63e0Kc8Go4Z8Z4YCuYIsfUsHREAFhYp_8piNlijepRViVhpTy-4jv_h-DG5wiuGYz1VhW-itXHt1byZCeb4DRJkD_luLD2vU8VCkjMEem34sdSVvkjc3pgSBZuLyrbOQadyCSvwoHr5ncDFeDymZgqZ-2ZZ13nns18XM0swU16m6jtpapgVIWlNWoV_1ZY0pj_e7HUMqzI"/>
</div>
<div>
<span class="block text-lg font-bold text-brand-navy">John Smith</span>
<span class="block text-xs text-gray-500">420 actions performed</span>
</div>
</div>
</div>
</div>
<!-- Advanced Filters -->
<div class="bg-white p-4 rounded-xl border border-gray-200 shadow-sm flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2 border-r border-gray-100 pr-4">
<span class="material-symbols-outlined text-gray-400 text-[20px]">filter_list</span>
<span class="text-xs font-bold uppercase tracking-wider">FILTERS</span>
</div>
<div class="flex flex-col gap-1">
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Date Range</label>
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
<option>Last 7 Days</option>
<option>Last 24 Hours</option>
<option>Current Month</option>
<option>Custom Range</option>
</select>
</div>
<div class="flex flex-col gap-1 px-4 border-l border-gray-100">
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Admin User</label>
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
<option>All Admins</option>
<option>John Smith</option>
<option>Sarah Wilson</option>
<option>Michael Chen</option>
</select>
</div>
<div class="flex flex-col gap-1 px-4 border-l border-gray-100">
<label class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Action Type</label>
<select class="bg-transparent border-none text-sm font-semibold text-brand-navy focus:ring-0 p-0 pr-8 cursor-pointer">
<option>All Actions</option>
<option>Template Created</option>
<option>User Role Updated</option>
<option>Webhook Modified</option>
</select>
</div>
<button class="ml-auto px-4 py-2 text-brand-blue hover:bg-brand-blue/5 rounded-lg text-sm font-bold transition-all">
Reset All
</button>
</div>
<!-- Audit Trail Table -->
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex-1">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 border-b border-gray-200">
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">TIMESTAMP</th>
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">ADMIN USER</th>
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">ACTION TYPE</th>
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">MODULE</th>
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">IP ADDRESS</th>
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider text-right">ACTIONS</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<!-- Row 1 -->
<tr class="hover:bg-gray-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-sm font-semibold text-brand-navy">Oct 24, 2023</span>
<span class="text-xs text-gray-400">14:22:05</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100">
<img alt="Sarah Wilson" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSYA3gcXSS36SCXa7VHoLkZvyq12A2PKkRwqdSwid5mFturCJZSLc9oF6oCBQTUmikXV8mMRl4B-zlC4BIybuVBBLvd45Ihkyu_kZPpH3nFZYQ4clD7_zuwialRkgGL9jNsNkuYOnHzBGD50pFUaytWLay6CZTm3LZN8Dxnnl44kqvBI1soeGADAWeO_tvVEwUBK-XE_T5E2fkZyP1zXaFwWG3MhIolhUZFOaJaLwfLS-VErBL3Fd-OHAL-Kngl9Zc1GW7Xu_-LB8"/>
</div>
<span class="text-sm font-medium text-brand-navy">Sarah Wilson</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-brand-blue/10 text-brand-blue rounded-full text-[10px] font-bold uppercase tracking-wider">
Template Created
</span>
</td>
<td class="px-6 py-4">
<span class="text-sm text-gray-600">Marketing Logs</span>
</td>
<td class="px-6 py-4">
<span class="font-mono text-xs text-gray-500">192.168.1.45</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-brand-blue hover:underline text-sm font-bold">View Details</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-sm font-semibold text-brand-navy">Oct 24, 2023</span>
<span class="text-xs text-gray-400">13:10:12</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100">
<img alt="John Smith" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDkNhxofa4DSCx-U5SjAVrkM1WbWctVdsuZurT8ViRHnuRhhBqru-H_ddHyQFWpyCaz03IOHicQu9tFFCQcB25mOPsEFRhUR18kZd-Sf5mEuz4vrmm7SCZ9WjtiZ508geeHN1q9PSDwaKWp_mwSye9OswxKQ3MnTwG4v5wtzziVIs75Ldx3Gg-wkkWU9ONYOzZiq7fblGP92ZQtO9B_lm9Gb1PCdBWm5vSz25G2EBtFwwFk8b-5NOF5zoUgVdDIRk7wlfFCh23h-yI"/>
</div>
<span class="text-sm font-medium text-brand-navy">John Smith</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-brand-navy/10 text-brand-navy rounded-full text-[10px] font-bold uppercase tracking-wider">
User Role Updated
</span>
</td>
<td class="px-6 py-4">
<span class="text-sm text-gray-600">Access Control</span>
</td>
<td class="px-6 py-4">
<span class="font-mono text-xs text-gray-500">45.23.11.102</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-brand-blue hover:underline text-sm font-bold">View Details</button>
</td>
</tr>
<!-- Row 4 (Alert state) -->
<tr class="bg-red-50/50 hover:bg-red-50 transition-colors">
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-sm font-semibold text-error">Oct 24, 2023</span>
<span class="text-xs text-gray-400">11:05:33</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-error/10 flex items-center justify-center">
<span class="material-symbols-outlined text-error text-[18px]">lock_reset</span>
</div>
<span class="text-sm font-medium text-error">SYSTEM_SEC</span>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-error/10 text-error rounded-full text-[10px] font-bold uppercase tracking-wider">
Failed Login Limit
</span>
</td>
<td class="px-6 py-4">
<span class="text-sm text-gray-600">Auth Gateway</span>
</td>
<td class="px-6 py-4">
<span class="font-mono text-xs text-error">212.88.34.12</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-error hover:underline text-sm font-bold">Security Alert</button>
</td>
</tr>
</tbody>
</table>
<!-- Pagination -->
<div class="px-6 py-4 bg-gray-50 flex items-center justify-between">
<span class="text-xs text-gray-500">Showing 1 to 5 of 1,284 results</span>
<div class="flex gap-2">
<button class="p-2 border border-gray-200 rounded-lg hover:bg-white transition-all disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="px-3 py-1 bg-brand-blue text-white rounded-lg text-sm font-bold">1</button>
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">2</button>
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">3</button>
<span class="px-2 text-gray-400">...</span>
<button class="px-3 py-1 hover:bg-white rounded-lg text-sm font-semibold text-gray-600 transition-all">257</button>
<button class="p-2 border border-gray-200 rounded-lg hover:bg-white transition-all">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
<!-- FAB -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-brand-blue text-white rounded-full shadow-lg flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-50">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">support_agent</span>
</button>
</main>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

481
stitch_bizone/campaign_detail_whatsapp_business_admin/code.html
View File

@ -1,481 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Campaign Detail | WhatsApp Business 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&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"]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.whatsapp-bubble-in {
background-color: #ffffff;
border-radius: 0 12px 12px 12px;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
</style>
</head>
<body class="bg-background font-body-md text-on-surface">
<!-- SideNavBar Shell -->
<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 border-r border-outline-variant/30">
<div class="mb-8 px-2">
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
<p class="font-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-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">chat</span>
<span class="font-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">contacts</span>
<span class="font-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">webhook</span>
<span class="font-body-md">Webhooks</span>
</a>
<!-- Active State Navigation -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-surface-container-low text-primary font-bold shadow-sm transition-transform duration-200 scale-[0.98]" href="#">
<span class="material-symbols-outlined text-[22px]" style="font-variation-settings: 'FILL' 1;">monitoring</span>
<span class="font-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant/20 space-y-1">
<button class="w-full bg-primary text-on-primary py-3 rounded-xl font-title-sm mb-4 flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[20px]">add_circle</span>
New Broadcast
</button>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">help</span>
<span class="font-body-md">Help Center</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">logout</span>
<span class="font-body-md">Logout</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-[260px] min-h-screen flex flex-col">
<!-- TopNavBar Shell -->
<header class="h-toolbar-height bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter sticky top-0 z-40">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary/20 text-body-sm" placeholder="Search campaign data..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 border-r border-outline-variant/30 pr-6 h-8">
<a class="font-title-sm text-title-sm text-primary font-bold border-b-2 border-primary" href="#">English</a>
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-all" href="#">Bahasa</a>
</div>
<div class="flex items-center gap-3">
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="w-10 h-10 rounded-full bg-primary-container overflow-hidden">
<img alt="Admin Profile Image" class="w-full h-full object-cover" data-alt="Close-up professional portrait of a tech administrator with a friendly expression. The lighting is bright and clean with a soft-focus office background, matching a high-end corporate software interface aesthetic. The color palette is composed of natural skin tones and a clean white background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbqLlBEgLKC7ZLaHEfSxtT04AJhcu_4ArEPq3y_6dXgpGYhyiGiB-XlErU42lfjl5Rrlo73HkHwlCNC-RIjbBKCkFxcr4O-NbuEkR1is8D_fBWYIAQg99nE7Fdl9ygXUH0Gs7T18KuEgwDmpovPKDjpBTR_wwKipvTWGs8vFqj2qNdCTbp7lg_lLsLzDixcxKV-r3jwQi09NBR3OzzfeOt0RthyEIgOvlvlXRt33T1K2hkeFb1EMNsi8Y2RAu0a0TyaMeAywXKwBI"/>
</div>
</div>
</div>
</header>
<!-- Page Canvas -->
<div class="p-container-margin space-y-gutter flex-1">
<!-- Breadcrumbs & Title -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm mb-1">
<span>Campaigns</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-primary font-medium">Flash Sale Q4 2023</span>
</div>
<div class="flex items-center gap-3">
<h2 class="font-display-lg text-display-lg text-on-surface">Flash Sale Q4 2023</h2>
<span class="px-3 py-1 bg-status-success/10 text-status-success text-label-caps rounded-full border border-status-success/20">Completed</span>
</div>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2 border border-outline-variant rounded-lg font-title-sm hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined">download</span>
Export Report
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary rounded-lg font-title-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">refresh</span>
Re-run Campaign
</button>
</div>
</div>
<!-- Analytics Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
<!-- Delivery Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">DELIVERY RATE</span>
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">98.2%</span>
<span class="text-status-success text-body-sm font-medium">↑ 1.2%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">12,450 / 12,678 Messages</p>
</div>
<!-- Read Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">READ RATE</span>
<span class="material-symbols-outlined text-status-info">visibility</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">84.5%</span>
<span class="text-status-success text-body-sm font-medium">↑ 4.5%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">10,522 Messages Opened</p>
</div>
<!-- CTR -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">CLICK-THROUGH</span>
<span class="material-symbols-outlined text-tertiary">ads_click</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">12.8%</span>
<span class="text-status-error text-body-sm font-medium">↓ 0.3%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">1,620 Links Clicked</p>
</div>
<!-- Reply Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">REPLY RATE</span>
<span class="material-symbols-outlined text-secondary">forum</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">5.4%</span>
<span class="text-status-success text-body-sm font-medium">↑ 2.1%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">685 Customers Replied</p>
</div>
</div>
<!-- Campaign Visuals & Content Section -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
<!-- Message Preview Mockup -->
<div class="lg:col-span-4 bg-surface-container p-8 rounded-xl border border-outline-variant/10 flex flex-col items-center">
<h3 class="text-label-caps text-on-surface-variant mb-6 w-full">CAMPAIGN PREVIEW</h3>
<div class="w-[280px] h-[520px] bg-white rounded-[40px] border-[8px] border-on-surface shadow-2xl relative overflow-hidden flex flex-col">
<!-- Phone Header -->
<div class="h-14 bg-primary text-on-primary flex items-center px-4 gap-3">
<span class="material-symbols-outlined">arrow_back</span>
<div class="w-8 h-8 rounded-full bg-surface-container-lowest/20"></div>
<div class="flex-1">
<div class="text-[14px] font-bold leading-tight">Flash Sale Bot</div>
<div class="text-[10px] opacity-80">online</div>
</div>
</div>
<!-- Chat Area -->
<div class="flex-1 bg-[#E5DDD5] p-4 space-y-4">
<div class="whatsapp-bubble-in p-2.5 max-w-[85%] relative">
<img alt="Campaign Product Image" class="rounded-lg w-full mb-2 h-32 object-cover" data-alt="A vibrant marketing photograph showing a variety of tech gadgets on a minimalist wooden table. The lighting is warm and inviting, emphasizing a retail 'flash sale' vibe. The image is framed as a WhatsApp message attachment with high contrast and sharp details to match a premium e-commerce design language." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAI2HS0obWO5yveOIGO2nzsWbylrWPZpQDbwJVZ0mesFJRcTYQTUQm8b3f7wx8x2Uj-HZoi7RrbxOL58rSN03j6zptqj0i9cfO-X1ETIFF2IIkPaC1vBuLQ-qTkxUjWDD0A0pQx5B613wTe8HjqmHcJ5dW7z74zqf8Lg9atszDogfjz9CNwYpohogVfzNBhPF7tYx5F1LxUp2iaVGpnB3xVRgaSaFrXBa98VKsWbPBwX1JJzsWYfeBPwUh_5S3wBBB5ni9b2xkI82k"/>
<p class="text-[13px] text-[#111b21] leading-snug">
Hey there! 🎁 Our Year-End Flash Sale is LIVE! Get 40% OFF all items in our store for the next 24 hours.
</p>
<div class="mt-3 flex flex-col gap-1">
<button class="w-full py-1.5 bg-white border border-gray-100 text-status-info text-[12px] font-bold rounded-md shadow-sm">Shop Now</button>
<button class="w-full py-1.5 bg-white border border-gray-100 text-status-info text-[12px] font-bold rounded-md shadow-sm">View Catalog</button>
</div>
<span class="text-[10px] text-on-surface-variant/60 block text-right mt-1">10:45 AM</span>
</div>
</div>
</div>
</div>
<!-- Engagement Chart -->
<div class="lg:col-span-8 bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="font-title-sm text-title-sm text-on-surface">Engagement Over Time</h3>
<p class="text-body-sm text-on-surface-variant">Visualizing interaction density for the first 12 hours</p>
</div>
<div class="flex gap-2">
<span class="flex items-center gap-1.5 text-[12px] text-on-surface-variant">
<span class="w-2.5 h-2.5 rounded-full bg-primary"></span> Read
</span>
<span class="flex items-center gap-1.5 text-[12px] text-on-surface-variant">
<span class="w-2.5 h-2.5 rounded-full bg-status-info"></span> Click
</span>
</div>
</div>
<!-- Simplified Visual Representation of a Chart -->
<div class="h-[360px] flex items-end justify-between gap-2 pt-10">
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 30%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg transition-all group-hover:bg-primary/40" style="height: 60%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">9 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 45%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg" style="height: 70%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">10 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 85%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/40 rounded-t-lg" style="height: 80%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-bold">11 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 100%;">
<div class="absolute bottom-0 left-0 w-full bg-primary rounded-t-lg" style="height: 90%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">12 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 75%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/40 rounded-t-lg" style="height: 75%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">1 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 60%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/30 rounded-t-lg" style="height: 65%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">2 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 50%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg" style="height: 50%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">3 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 40%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/10 rounded-t-lg" style="height: 40%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">4 PM</div>
</div>
</div>
</div>
</div>
<!-- Recipient Status Table -->
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10 overflow-hidden">
<div class="p-card-padding flex justify-between items-center bg-surface-container-lowest">
<h3 class="font-title-sm text-title-sm text-on-surface">Recipient List</h3>
<div class="flex gap-4">
<select class="bg-surface-container border-none text-body-sm rounded-lg py-1.5 pl-3 pr-8 focus:ring-1 focus:ring-primary">
<option>All Status</option>
<option>Read</option>
<option>Delivered</option>
<option>Failed</option>
</select>
<div class="relative">
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-[18px] text-on-surface-variant">filter_list</span>
<input class="pl-8 pr-3 py-1.5 bg-surface-container border-none rounded-lg text-body-sm focus:ring-1 focus:ring-primary" placeholder="Filter by name..." type="text"/>
</div>
</div>
</div>
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-3 text-label-caps text-on-surface-variant">RECIPIENT</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">PHONE NUMBER</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">STATUS</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">LAST UPDATED</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">ACTION</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/10">
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-[12px] font-bold text-on-secondary-container">JS</div>
<span class="font-body-md font-medium">John Smith</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+1 (555) 0123-4567</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">done_all</span>
<span class="text-body-sm font-medium">Read</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:48 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-tertiary-container flex items-center justify-center text-[12px] font-bold text-on-tertiary-container">AW</div>
<span class="font-body-md font-medium">Alice Wong</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+852 9123-4567</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]">done_all</span>
<span class="text-body-sm font-medium">Delivered</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:46 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-error-container flex items-center justify-center text-[12px] font-bold text-on-error-container">RM</div>
<span class="font-body-md font-medium">Robert Miller</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+44 7700 900123</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-status-error text-[18px]">error</span>
<span class="text-body-sm font-medium text-status-error">Failed</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:45 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">Retry</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-surface-variant flex items-center justify-center text-[12px] font-bold text-on-surface-variant">CK</div>
<span class="font-body-md font-medium">Catherine Kim</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+82 10-1234-5678</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">done_all</span>
<span class="text-body-sm font-medium">Read</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 11:02 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
</tbody>
</table>
<div class="p-4 bg-surface-container-lowest border-t border-outline-variant/10 flex justify-between items-center">
<span class="text-body-sm text-on-surface-variant">Showing 1-10 of 12,678 recipients</span>
<div class="flex gap-2">
<button class="p-1.5 rounded border border-outline-variant hover:bg-surface-container transition-colors disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="px-3 py-1 bg-primary text-on-primary rounded text-body-sm font-bold">1</button>
<button class="px-3 py-1 rounded border border-outline-variant hover:bg-surface-container text-body-sm transition-colors">2</button>
<button class="px-3 py-1 rounded border border-outline-variant hover:bg-surface-container text-body-sm transition-colors">3</button>
<button class="p-1.5 rounded border border-outline-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
<!-- Footer Note -->
<footer class="p-gutter text-center border-t border-outline-variant/10">
<p class="text-body-sm text-on-surface-variant/60">© 2023 WhatsApp Business Admin Console. Data refreshed every 5 minutes.</p>
</footer>
</main>
</body></html>

BIN
stitch_bizone/campaign_detail_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 312 KiB

505
stitch_bizone/campaign_list_whatsapp_business_admin/code.html
View File

@ -1,505 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Campaign Management - WhatsApp Business 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;500;600;700;800&amp;family=Inter:wght@400;500;600;700&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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
}
.headline-font {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<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>
</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-10 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>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">dashboard</span>
<span class="font-body-md text-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary bg-surface-container-low font-bold transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]" style="font-variation-settings: 'FILL' 1;">description</span>
<span class="font-body-md text-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">chat</span>
<span class="font-body-md text-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">contacts</span>
<span class="font-body-md text-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">webhook</span>
<span class="font-body-md text-body-md">Webhooks</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">monitoring</span>
<span class="font-body-md text-body-md">Analytics</span>
</a>
</nav>
<div class="mt-auto space-y-1 border-t border-surface-container pt-4">
<button class="w-full flex items-center justify-center gap-2 bg-primary text-on-primary py-3 rounded-xl font-bold shadow-sm hover:opacity-90 transition-opacity mb-4">
<span class="material-symbols-outlined">add</span>
<span>New Broadcast</span>
</button>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="text-body-sm font-body-sm">Settings</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">help</span>
<span class="text-body-sm font-body-sm">Help Center</span>
</a>
<div class="flex items-center gap-3 px-3 py-4 mt-2 bg-surface-container rounded-xl">
<img alt="Admin Avatar" class="w-8 h-8 rounded-full border border-white" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmm7pJyH2ki7tzjlaO5sq6qJTi5WlJPj6OcQDT2JYe5QGFq6ADrKGIO7lBhh7WncMEbJJzqRB-mw2c0J9JfdfeKjvWsKx6pPLrZxpJOAXqsMxxmKDHyZ4mYEXtwjsDBDh4XcGkvEXqXYPD0lJio83mR54lAt3eXSjqVl2g2h4QfsfojYBXEfoaVn3DJV1p-QTplYkikg2f83v9nr3FEIqKRdcLNlaH2ZKKUDAWkia9LZR6ks7niGpTSDkuXiCzIp0_1JKZW14miDI"/>
<div class="overflow-hidden">
<p class="text-body-sm font-bold truncate">Alex Rivera</p>
<p class="text-[10px] text-on-surface-variant truncate">System Admin</p>
</div>
<button class="ml-auto text-on-surface-variant">
<span class="material-symbols-outlined text-[18px]">logout</span>
</button>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-[260px] min-h-screen">
<!-- TopNavBar -->
<header class="h-[64px] bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter sticky top-0 z-40">
<div class="flex items-center gap-4 flex-1 max-w-xl">
<div class="relative w-full">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60">search</span>
<input class="w-full bg-surface-container-low border-none rounded-lg pl-10 pr-4 py-2 focus:ring-2 focus:ring-primary text-body-sm" placeholder="Search campaigns..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 mr-4 border-r pr-4 border-surface-container">
<button class="text-body-sm font-title-sm text-primary font-bold border-b-2 border-primary px-2">English</button>
<button class="text-body-sm font-title-sm text-on-surface-variant px-2 hover:text-primary transition-colors">Bahasa</button>
</div>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-low text-on-surface-variant relative">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-status-error rounded-full border border-white"></span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-px bg-surface-container mx-2"></div>
<div class="flex items-center gap-3">
<span class="text-right hidden sm:block">
<p class="text-body-sm font-bold leading-tight">Admin Console</p>
<p class="text-[11px] text-status-success font-bold uppercase tracking-wider">Online</p>
</span>
<img alt="Admin Profile Image" class="w-9 h-9 rounded-full bg-surface-container" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAS0-NnuWYQ2AGp8cmAFGaB_8hltXEg3qB4mEyddRkKHovhDc7Vf5L637QlMBFmfLbl7bj9nT1HpvrxXGZh5co1k8Fs9Wil99dKnPhvMr_KhwoQd4839RR6l-7Lq6ZztcUs8h8Rwv22O06bfyHxYJkB4PRZYEoDZD0NCJhS6EzNByVDVqfZM5BsFG2MwshU_1MvkJzQ_6BYB76Mgn4uAIBs4g-EM7GmlWypuGjN5vPLLrpLwKUVyNCeIkMtH29w7F8U1c3ffBHcnNs"/>
</div>
</div>
</header>
<!-- Page Content -->
<div class="p-container-margin">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
<div>
<h2 class="font-display-lg text-display-lg text-text-primary">Campaign Management</h2>
<p class="text-body-md text-text-secondary mt-1">Design, schedule, and track your WhatsApp broadcast performance.</p>
</div>
<button class="bg-primary text-on-primary px-6 py-3 rounded-xl font-bold flex items-center justify-center gap-2 shadow-sm hover:bg-opacity-90 transition-all scale-98 active:scale-95">
<span class="material-symbols-outlined">campaign</span>
<span>New Campaign</span>
</button>
</div>
<!-- Dashboard Stats Preview (Optional Bento Grid Element) -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-container flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="material-symbols-outlined text-primary p-2 bg-surface-container rounded-lg">send</span>
<span class="text-status-success font-bold text-xs flex items-center gap-0.5">
<span class="material-symbols-outlined text-sm">trending_up</span> 12%
</span>
</div>
<div>
<p class="text-body-sm text-text-secondary font-medium">Total Messages</p>
<p class="text-headline-md font-bold text-primary">124.5k</p>
</div>
</div>
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-container flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="material-symbols-outlined text-secondary p-2 bg-surface-container rounded-lg">done_all</span>
<span class="text-status-success font-bold text-xs flex items-center gap-0.5">
<span class="material-symbols-outlined text-sm">trending_up</span> 8.4%
</span>
</div>
<div>
<p class="text-body-sm text-text-secondary font-medium">Delivery Rate</p>
<p class="text-headline-md font-bold text-secondary">98.2%</p>
</div>
</div>
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-container flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="material-symbols-outlined text-status-warning p-2 bg-surface-container rounded-lg">schedule</span>
</div>
<div>
<p class="text-body-sm text-text-secondary font-medium">Scheduled</p>
<p class="text-headline-md font-bold text-on-surface">12</p>
</div>
</div>
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-container flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="material-symbols-outlined text-status-error p-2 bg-surface-container rounded-lg">error_outline</span>
</div>
<div>
<p class="text-body-sm text-text-secondary font-medium">Failed Delivery</p>
<p class="text-headline-md font-bold text-on-surface">158</p>
</div>
</div>
</div>
<!-- Campaign List Card -->
<div class="bg-surface-container-lowest rounded-2xl shadow-sm overflow-hidden border border-surface-container">
<!-- Table Controls -->
<div class="p-6 border-b border-surface-container flex flex-col sm:flex-row gap-4 justify-between items-center">
<div class="flex items-center gap-2 overflow-x-auto pb-1 w-full sm:w-auto">
<button class="bg-primary-container text-on-primary-container px-4 py-2 rounded-full text-body-sm font-bold whitespace-nowrap">All Campaigns</button>
<button class="hover:bg-surface-container px-4 py-2 rounded-full text-body-sm font-medium text-on-surface-variant transition-colors whitespace-nowrap">Sent</button>
<button class="hover:bg-surface-container px-4 py-2 rounded-full text-body-sm font-medium text-on-surface-variant transition-colors whitespace-nowrap">Scheduled</button>
<button class="hover:bg-surface-container px-4 py-2 rounded-full text-body-sm font-medium text-on-surface-variant transition-colors whitespace-nowrap">Draft</button>
<button class="hover:bg-surface-container px-4 py-2 rounded-full text-body-sm font-medium text-on-surface-variant transition-colors whitespace-nowrap text-status-error">Failed</button>
</div>
<div class="flex items-center gap-3 w-full sm:w-auto">
<div class="relative flex-1 sm:w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60 text-lg">filter_list</span>
<select class="w-full bg-surface-container-low border-none rounded-lg pl-10 pr-4 py-2 text-body-sm appearance-none focus:ring-1 focus:ring-primary">
<option>Sort by: Newest</option>
<option>Sort by: Oldest</option>
<option>Sort by: Best Delivery</option>
</select>
</div>
</div>
</div>
<!-- Campaign Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low border-b border-surface-container">
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Campaign Name</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Audience</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Date</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Delivery Rate</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-surface-container">
<!-- Row 1: Sent -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div>
<p class="text-body-md font-bold text-on-surface">Summer Sale 2024</p>
<p class="text-[11px] text-on-surface-variant">ID: CAM-98231</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-lg opacity-40">group</span>
<span class="text-body-sm">45,200 recipients</span>
</div>
</td>
<td class="px-6 py-4">
<div class="text-body-sm">
<p>June 12, 2024</p>
<p class="text-[11px] opacity-60">09:15 AM</p>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-primary-container/20 text-on-primary-container">
<span class="w-1.5 h-1.5 rounded-full bg-status-success"></span>
Sent
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-16 bg-surface-container h-1.5 rounded-full overflow-hidden">
<div class="bg-status-success h-full w-[99.2%]"></div>
</div>
<span class="text-body-sm font-bold">99.2%</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 hover:bg-surface-container rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2: Scheduled -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div>
<p class="text-body-md font-bold text-on-surface">Weekly Newsletter #42</p>
<p class="text-[11px] text-on-surface-variant">ID: CAM-98244</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-lg opacity-40">group</span>
<span class="text-body-sm">VIP Customer List</span>
</div>
</td>
<td class="px-6 py-4">
<div class="text-body-sm font-medium text-status-info">
<p>In 2 hours</p>
<p class="text-[11px] opacity-60">14:00 PM</p>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-status-info/10 text-status-info border border-status-info/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-info animate-pulse"></span>
Scheduled
</span>
</td>
<td class="px-6 py-4">
<span class="text-body-sm text-on-surface-variant italic">Pending send...</span>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 hover:bg-surface-container rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 3: Draft -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div>
<p class="text-body-md font-bold text-on-surface">Product Launch Promo</p>
<p class="text-[11px] text-on-surface-variant">ID: CAM-98255</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-lg opacity-40">group</span>
<span class="text-body-sm">New Leads Segment</span>
</div>
</td>
<td class="px-6 py-4">
<div class="text-body-sm">
<p>Not set</p>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-surface-container text-on-surface-variant">
<span class="w-1.5 h-1.5 rounded-full bg-on-surface-variant"></span>
Draft
</span>
</td>
<td class="px-6 py-4">
<span class="text-body-sm text-on-surface-variant">0%</span>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 hover:bg-surface-container rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 4: Failed -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div>
<p class="text-body-md font-bold text-on-surface">Loyalty Program Update</p>
<p class="text-[11px] text-on-surface-variant">ID: CAM-98201</p>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-lg opacity-40">group</span>
<span class="text-body-sm">Dormant Users</span>
</div>
</td>
<td class="px-6 py-4">
<div class="text-body-sm">
<p>June 10, 2024</p>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-status-error/10 text-status-error">
<span class="material-symbols-outlined text-xs">error</span>
Failed
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-16 bg-surface-container h-1.5 rounded-full overflow-hidden">
<div class="bg-status-error h-full w-[45%]"></div>
</div>
<span class="text-body-sm font-bold text-status-error">45.0%</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 hover:bg-surface-container rounded-lg text-status-error">
<span class="material-symbols-outlined">refresh</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-6 py-4 border-t border-surface-container flex flex-col sm:flex-row justify-between items-center gap-4 bg-surface-container-lowest">
<p class="text-body-sm text-on-surface-variant">Showing <span class="font-bold">1-10</span> of <span class="font-bold">245</span> campaigns</p>
<div class="flex items-center gap-1">
<button class="p-2 hover:bg-surface-container rounded-lg text-on-surface-variant disabled:opacity-30" disabled="">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-on-primary font-bold text-body-sm">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container text-body-sm">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container text-body-sm">3</button>
<span class="px-1 opacity-40">...</span>
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-surface-container text-body-sm">25</button>
<button class="p-2 hover:bg-surface-container rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Contextual Insight (Bento card addition) -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-12 gap-6">
<div class="md:col-span-8 bg-surface-container-lowest rounded-2xl p-6 shadow-sm border border-surface-container overflow-hidden relative">
<div class="relative z-10">
<h3 class="font-title-sm text-title-sm text-on-surface mb-2">Campaign Performance Optimization</h3>
<p class="text-body-md text-on-surface-variant max-w-xl">Based on your recent broadcasts, campaigns sent between <span class="font-bold text-primary">09:00 AM - 11:00 AM</span> on Tuesdays have a <span class="font-bold text-status-success">15% higher</span> read rate. Consider scheduling your next template for this window.</p>
<div class="mt-4 flex gap-4">
<button class="bg-surface-container text-on-surface px-4 py-2 rounded-lg font-bold text-body-sm hover:bg-surface-variant transition-all">View Details</button>
</div>
</div>
<!-- Decorative Graphic -->
<div class="absolute -right-4 -bottom-4 w-48 h-48 opacity-10 bg-primary-container rounded-full blur-3xl"></div>
</div>
<div class="md:col-span-4 bg-primary text-on-primary rounded-2xl p-6 shadow-md flex flex-col justify-between">
<div class="flex justify-between items-start">
<h3 class="font-bold text-body-md">Template Health</h3>
<span class="material-symbols-outlined">verified</span>
</div>
<div>
<p class="text-[32px] font-bold leading-tight">94%</p>
<p class="text-body-sm opacity-80 mt-1">High quality rating across all approved templates.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Contextual FAB (Only for Home/Main sections) -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-on-primary rounded-full shadow-2xl flex items-center justify-center group hover:scale-110 transition-transform md:hidden z-50">
<span class="material-symbols-outlined text-[28px]">add</span>
</button>
</body></html>

BIN
stitch_bizone/campaign_list_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 359 KiB

390
stitch_bizone/contact_detail_whatsapp_business_admin/code.html
View File

@ -1,390 +0,0 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Contact Details - WhatsApp Business 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;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": {
"surface-container-highest": "#dce5d8",
"secondary": "#006b5f",
"secondary-fixed": "#8ff4e3",
"on-primary-fixed": "#002109",
"on-primary-fixed-variant": "#005322",
"on-surface": "#151e16",
"on-tertiary-container": "#78351b",
"on-surface-variant": "#3c4a3d",
"surface-container-high": "#e2ebde",
"error-container": "#ffdad6",
"text-secondary": "#64748B",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#3de273",
"border-subtle": "#E2E8F0",
"tertiary-container": "#ffa07e",
"secondary-fixed-dim": "#72d8c8",
"on-tertiary": "#ffffff",
"status-success": "#25D366",
"outline-variant": "#bbcbb9",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-fixed": "#ffdbcf",
"background": "#f3fcef",
"surface-container": "#e7f1e4",
"on-secondary": "#ffffff",
"status-error": "#EF4444",
"tertiary": "#93492e",
"surface-card": "#FFFFFF",
"surface-variant": "#dce5d8",
"inverse-on-surface": "#eaf3e6",
"on-secondary-fixed": "#00201c",
"on-tertiary-fixed-variant": "#763319",
"on-tertiary-fixed": "#380d00",
"on-primary-container": "#005523",
"inverse-primary": "#3de273",
"surface": "#f3fcef",
"secondary-container": "#8cf1e1",
"background-main": "#F8F9FA",
"status-info": "#3B82F6",
"surface-tint": "#006d2f",
"status-warning": "#F59E0B",
"surface-bright": "#f3fcef",
"primary": "#006d2f",
"surface-container-low": "#edf6e9",
"on-error-container": "#93000a",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-dim": "#d3ddd0",
"on-secondary-fixed-variant": "#005047",
"on-secondary-container": "#006f64",
"outline": "#6c7b6b",
"inverse-surface": "#2a332a",
"primary-fixed": "#66ff8e",
"on-background": "#151e16",
"on-primary": "#ffffff",
"text-primary": "#1A1C1E",
"primary-container": "#25d366"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"base": "8px",
"card-padding": "20px",
"toolbar-height": "64px",
"container-margin": "32px",
"sidebar-width": "260px"
},
"fontFamily": {
"title-sm": ["Plus Jakarta Sans"],
"label-caps": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"mono-code": ["JetBrains Mono"]
},
"fontSize": {
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
body {
background-color: #f3fcef;
font-family: 'Inter', sans-serif;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
</style>
</head>
<body class="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-10 px-2">
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
<p class="font-body-sm text-on-surface-variant opacity-70">Admin Console</p>
</div>
<nav class="flex-grow space-y-2">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-primary font-bold bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">contacts</span>
<span class="font-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">webhook</span>
<span class="font-body-md">Webhooks</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span class="font-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-surface-container space-y-1">
<button class="w-full bg-primary text-on-primary font-bold py-3 rounded-xl mb-4 hover:opacity-90 transition-opacity">
New Broadcast
</button>
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
<span class="font-body-sm">Help Center</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-sm">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-4">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full w-80 text-body-sm focus:ring-2 focus:ring-primary/20" placeholder="Search contacts or messages..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 font-title-sm text-on-surface-variant">
<button class="hover:text-primary transition-colors">English</button>
<div class="h-4 w-[1px] bg-surface-container-highest"></div>
<button class="hover:text-primary transition-colors">Bahasa</button>
</div>
<div class="flex items-center gap-3 border-l border-surface-container-highest pl-6">
<button class="p-2 text-on-surface-variant hover:text-primary relative">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-status-error rounded-full"></span>
</button>
<button class="p-2 text-on-surface-variant hover:text-primary">
<span class="material-symbols-outlined">settings</span>
</button>
<img alt="Admin Avatar" class="w-8 h-8 rounded-full border border-surface-container-highest" data-alt="A professional headshot of a corporate male administrator in his 30s, wearing a clean white shirt. The lighting is soft and even, typical of a professional studio environment. The background is a minimalist, light gray gradient that complements a clean SaaS dashboard aesthetic. The mood is trustworthy and efficient." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdHxHkIPj1i86hTXVDEzzo9CscVxxWbz2SZR5yDfzgZKn4nqU9n3f1SMosiJeQT7mhcwSXJvMGhrv6DlKFAaqzyJSwFBqXHVpZOnNKLr44J69dPNZtoO6dgaMbooORPvZVYAbiQt69dE0pu6BnsnMUZHL35LenKuo4RmFRGvbcG7oYu0dos9oYCUhSTg-paEqYSIvOJ5XK7s0UQQQJfj9O-0bTnLjTc0kEf0-gtgsmATNh6xecHC9W0hW2DA6TV7yYAfSS8Rilny8"/>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-[260px] pt-[64px] p-container-margin">
<!-- Breadcrumbs -->
<nav class="flex items-center gap-2 mb-8 text-on-surface-variant font-body-sm">
<a class="hover:text-primary" href="#">Contacts</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-primary font-bold">Sarah Jenkins</span>
</nav>
<div class="bento-grid">
<!-- Profile Header Card (Full Width) -->
<section class="col-span-12 bg-surface-card rounded-xl shadow-sm p-8 flex items-center justify-between border border-surface-container">
<div class="flex items-center gap-6">
<div class="relative">
<img alt="Sarah Jenkins" class="w-24 h-24 rounded-full border-4 border-surface-container-low object-cover" data-alt="A high-quality close-up portrait of a professional woman in her early 30s with a warm and approachable expression. She is in a brightly lit modern office setting with soft natural light streaming in. Her attire is business casual. The visual style is crisp, clean, and optimistic, perfectly suited for a premium enterprise contact management system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMrVyj_7HZm8_nsnC868XN7bNsblyBom8qvUe2kXl7HDjZB3wis63Q8x4wpb6kjMBNE8KqwMBaMv2gnVNUbSqCPOq524tt1P3ideoa6-3LOjhI41beoO81ETfdJaBwkjejdgNrBKo0Dtiq0uxrPkNCgD650IkCRn4ieELjZfitQk-H-Vh4DDJvJVBy72mmqZWvsRcaMOsICYQO0qnbTTCNWm_Lzgz9SY1_YycYE5NPSk6r4RqgDMeT12t6-y4zhH83_GsUXz8Vaic"/>
<div class="absolute bottom-1 right-1 w-5 h-5 bg-status-success border-4 border-surface-card rounded-full"></div>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h2 class="font-display-lg text-display-lg text-primary">Sarah Jenkins</h2>
<span class="bg-surface-container px-3 py-1 rounded-full text-label-caps text-on-surface-variant">ID: 98421</span>
</div>
<p class="text-on-surface-variant font-body-md flex items-center gap-2">
<span class="material-symbols-outlined text-status-success text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
Active Customer • Last seen 12 mins ago
</p>
</div>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-6 py-3 border border-outline-variant rounded-xl font-body-md hover:bg-surface-container-low transition-all">
<span class="material-symbols-outlined">edit</span>
Edit Contact
</button>
<button class="flex items-center gap-2 px-6 py-3 bg-primary text-on-primary rounded-xl font-bold shadow-sm hover:opacity-90 transition-all">
<span class="material-symbols-outlined">chat</span>
Message
</button>
<button class="p-3 text-status-error hover:bg-error-container/20 rounded-xl transition-all">
<span class="material-symbols-outlined">block</span>
</button>
</div>
</section>
<!-- Contact Details (Left Column) -->
<aside class="col-span-4 space-y-6">
<!-- Info Card -->
<div class="bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
<h3 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">info</span>
Contact Information
</h3>
<div class="space-y-6">
<div>
<label class="text-label-caps text-on-surface-variant block mb-1">PHONE NUMBER</label>
<div class="flex items-center justify-between">
<span class="font-body-md font-bold">+1 (555) 0123-4567</span>
<button class="text-primary hover:bg-primary/10 p-1 rounded"><span class="material-symbols-outlined text-[20px]">content_copy</span></button>
</div>
</div>
<div>
<label class="text-label-caps text-on-surface-variant block mb-1">EMAIL ADDRESS</label>
<span class="font-body-md">sarah.jenkins@retailflow.com</span>
</div>
<div>
<label class="text-label-caps text-on-surface-variant block mb-1">LOCATION</label>
<span class="font-body-md">San Francisco, CA</span>
</div>
<div>
<label class="text-label-caps text-on-surface-variant block mb-4">TAGS</label>
<div class="flex flex-wrap gap-2">
<span class="bg-primary-container text-on-primary-container px-3 py-1 rounded-full text-label-caps">VIP CUSTOMER</span>
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-label-caps">RETAIL</span>
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-3 py-1 rounded-full text-label-caps">TECH SAVVY</span>
</div>
</div>
</div>
</div>
<!-- Notes Section -->
<div class="bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
<div class="flex items-center justify-between mb-6">
<h3 class="font-title-sm text-title-sm flex items-center gap-2">
<span class="material-symbols-outlined text-primary">sticky_note_2</span>
Internal Notes
</h3>
<button class="text-primary font-body-sm hover:underline">Add Note</button>
</div>
<div class="space-y-4">
<div class="bg-surface-container-low p-4 rounded-lg border-l-4 border-primary">
<p class="font-body-sm mb-2 italic">"Prefers afternoon communication. Interested in upcoming fall collection preview."</p>
<div class="flex items-center justify-between text-label-caps text-on-surface-variant">
<span>- Alex Rivera</span>
<span>Oct 24, 2023</span>
</div>
</div>
<div class="bg-surface-container-low p-4 rounded-lg">
<p class="font-body-sm mb-2">"Resolved shipping delay issue for Order #88291. Customer satisfied with credit offered."</p>
<div class="flex items-center justify-between text-label-caps text-on-surface-variant">
<span>- Maya Chen</span>
<span>Sep 12, 2023</span>
</div>
</div>
</div>
</div>
</aside>
<!-- Interaction History Timeline (Right Column) -->
<section class="col-span-8 bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
<div class="flex items-center justify-between mb-8">
<h3 class="font-title-sm text-title-sm flex items-center gap-2">
<span class="material-symbols-outlined text-primary">history</span>
Interaction History
</h3>
<div class="flex gap-2">
<button class="px-4 py-2 bg-surface-container rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container-high transition-colors">ALL ACTIVITY</button>
<button class="px-4 py-2 rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container transition-colors">MESSAGES</button>
<button class="px-4 py-2 rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container transition-colors">SYSTEM</button>
</div>
</div>
<!-- Timeline -->
<div class="relative ml-4 space-y-8 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-surface-container-highest">
<!-- Timeline Item: Message -->
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-primary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
<span class="material-symbols-outlined text-[14px] text-on-primary-container" style="font-variation-settings: 'FILL' 1;">chat</span>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="font-body-md font-bold">Message Sent</span>
<span class="text-on-surface-variant text-label-caps">• 12 minutes ago</span>
</div>
<div class="bg-surface-container-low p-4 rounded-xl border border-surface-container max-w-lg">
<p class="text-body-sm text-on-surface mb-3">"Hi Sarah! Your recent order for the Signature Canvas Tote has been processed and is ready for dispatch."</p>
<div class="flex items-center gap-4 text-label-caps text-on-surface-variant">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px] text-status-success">done_all</span> Delivered</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">visibility</span> Read at 10:48 AM</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item: Status Change -->
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-secondary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
<span class="material-symbols-outlined text-[14px] text-on-secondary-container" style="font-variation-settings: 'FILL' 1;">person_pin</span>
</div>
<div>
<div class="flex items-center gap-2">
<span class="font-body-md font-bold">Status Updated</span>
<span class="text-on-surface-variant text-label-caps">• Yesterday, 4:15 PM</span>
</div>
<p class="text-body-sm text-on-surface-variant mt-1">Status changed from <span class="text-on-surface font-semibold">Inactive</span> to <span class="text-status-success font-semibold">Active Customer</span> by System Trigger.</p>
</div>
</div>
<!-- Timeline Item: Inbound Message -->
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-surface-container-highest rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
<span class="material-symbols-outlined text-[14px] text-on-surface-variant" style="font-variation-settings: 'FILL' 1;">call_received</span>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="font-body-md font-bold">Inbound Message</span>
<span class="text-on-surface-variant text-label-caps">• Oct 24, 09:12 AM</span>
</div>
<div class="bg-surface-container-highest/30 p-4 rounded-xl border border-surface-container max-w-lg">
<p class="text-body-sm text-on-surface italic">"Thanks for the update! Looking forward to receiving it."</p>
</div>
</div>
</div>
<!-- Timeline Item: Tag Added -->
<div class="relative pl-10">
<div class="absolute left-0 top-1 w-6 h-6 bg-tertiary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
<span class="material-symbols-outlined text-[14px] text-on-tertiary-container" style="font-variation-settings: 'FILL' 1;">sell</span>
</div>
<div>
<div class="flex items-center gap-2">
<span class="font-body-md font-bold">Tag Added</span>
<span class="text-on-surface-variant text-label-caps">• Oct 22, 11:30 AM</span>
</div>
<p class="text-body-sm text-on-surface-variant mt-1">Tag <span class="bg-primary-container text-on-primary-container px-2 py-0.5 rounded text-[11px] font-bold">VIP CUSTOMER</span> added by Admin Alex Rivera.</p>
</div>
</div>
</div>
<div class="mt-10 flex justify-center">
<button class="text-primary font-bold text-body-sm flex items-center gap-1 hover:opacity-80 transition-opacity">
View Full History
<span class="material-symbols-outlined">expand_more</span>
</button>
</div>
</section>
</div>
</main>
</body></html>

BIN
stitch_bizone/contact_detail_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 350 KiB

449
stitch_bizone/contacts_bizone_standard_layout/code.html Normal file
View File

@ -0,0 +1,449 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Roles &amp; Permissions | 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&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": "#001b44",
"primary-light": "#002d70",
"accent": "#00a3ff",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface": "#ffffff",
"secondary-container": "#e0f2fe",
"surface-tint": "#001b44",
"on-primary": "#ffffff",
"status-error": "#EF4444",
"background": "#F8F9FA",
"surface-variant": "#f1f5f9",
"on-surface-variant": "#475569",
"primary-container": "#001b44",
"on-primary-container": "#ffffff",
"surface-card": "#FFFFFF",
"outline-variant": "#E2E8F0",
"status-success": "#10b981",
"outline": "#94a3b8",
"surface-container": "#f8fafc",
"text-primary": "#0f172a",
"text-secondary": "#64748B",
"border-subtle": "#E2E8F0"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-margin": "32px",
"gutter": "24px",
"sidebar-width": "260px",
"toolbar-height": "72px",
"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": ["jetbrainsMono"]
},
"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>
body {
background-color: #F8F9FA;
font-family: 'Inter', sans-serif;
color: #151e16;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.permission-toggle:checked + .toggle-bg { background-color: #00a3ff; }
.permission-toggle:checked + .toggle-bg .toggle-dot { transform: translateX(100%); }
</style>
</head>
<body class="overflow-hidden">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-[260px] bg-[#001b44] flex flex-col z-50">
<!-- Sidebar Header with Logo -->
<div class="h-[72px] bg-white flex items-center px-6 border-b border-gray-100">
<img alt="BizOne Logo" class="h-8 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
</div>
<div class="mt-8 px-4 flex-1 flex flex-col gap-1 custom-scrollbar overflow-y-auto">
<button class="mb-6 w-full flex items-center justify-center gap-2 bg-accent text-white py-3 px-4 rounded-xl font-title-sm text-title-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex flex-col gap-1">
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">chat</span>
Conversations
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">contacts</span>
Contacts
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">description</span>
Templates
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">webhook</span>
Webhooks
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">monitoring</span>
Analytics
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white font-bold bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
Settings
</a>
</nav>
</div>
<div class="mt-auto p-4 border-t border-white/10 flex flex-col gap-1">
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">help</span>
Help Center
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">logout</span>
Logout
</a>
</div>
</aside>
<!-- Main Content Area -->
<div class="ml-[260px] min-h-screen flex flex-col">
<!-- TopNavBar -->
<header class="h-[72px] bg-white shadow-sm flex justify-between items-center px-gutter z-40 border-b border-gray-100">
<div class="flex items-center gap-6">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
<input class="pl-10 pr-4 py-1.5 bg-slate-50 rounded-full border border-slate-200 focus:ring-2 focus:ring-accent focus:border-accent w-64 text-body-sm font-body-sm transition-all" placeholder="Search..." type="text"/>
</div>
<div class="flex gap-4 font-title-sm text-title-sm">
<a class="text-primary font-bold border-b-2 border-primary" href="#">English</a>
<a class="text-slate-500 hover:text-primary transition-all" href="#">Bahasa</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex gap-2">
<button class="p-2 rounded-full hover:bg-slate-50 text-slate-500 transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 rounded-full hover:bg-slate-50 text-slate-500 transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
</div>
<div class="h-8 w-px bg-slate-200 mx-1"></div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="font-title-sm text-[14px] leading-tight font-bold text-primary">Admin User</p>
<p class="text-slate-500 text-[12px]">Global Admin</p>
</div>
<img alt="Admin Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaJS2OKrXWTy1XzOoMOfXrdLBIAP8f07UWKk8SrvBZl-XDCg0M9DvIxhv9t943CFtm9pwartTHJfa-AeR8Z2u2KqcnNbzTFpR9roPmrkOvZAFiTAewSMgvD-jA8cgsflEIi_dVkja8Ga-r5k3QFI5Mytf91IkCEQGhAjg4z6F4G1BdET2uX29j0ByJwog-qGCrMVWf1WYs19JUJ1vp83rONSVYdfucJuwbQpxdezjnInDT7w84eZzvEMx6Z19It3U7iIPH4pKhHwU"/>
</div>
</div>
</header>
<!-- Canvas -->
<main class="flex-1 overflow-y-auto p-gutter bg-[#F8F9FA]">
<div class="max-w-6xl mx-auto">
<!-- Page Header -->
<div class="mb-8 flex justify-between items-end">
<div>
<h2 class="font-display-lg text-display-lg text-primary mb-1">Roles &amp; Permissions</h2>
<p class="text-slate-600 font-body-md">Configure access levels and granular permissions for your team members.</p>
</div>
<button class="bg-primary text-white px-6 py-2.5 rounded-xl font-title-sm hover:bg-primary-light transition-all shadow-sm flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">add_moderator</span>
Create New Role
</button>
</div>
<!-- Bento Grid Layout for Roles -->
<div class="grid grid-cols-12 gap-6 mb-8">
<!-- Admin Role Card -->
<div class="col-span-12 lg:col-span-4 bg-white p-card-padding rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-slate-100 rounded-lg">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">shield_person</span>
</div>
<span class="px-3 py-1 bg-primary text-white text-label-caps rounded-full">Active</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Admin</h3>
<p class="text-slate-500 text-body-sm mb-4">Full access to all modules, including system settings and billing.</p>
<div class="flex items-center gap-2 text-slate-500 text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
2 users assigned
</div>
</div>
<!-- Editor Role Card -->
<div class="col-span-12 lg:col-span-4 bg-white p-card-padding rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-slate-100 rounded-lg">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">edit_document</span>
</div>
<span class="px-3 py-1 bg-slate-100 text-slate-600 text-label-caps rounded-full">Standard</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Editor</h3>
<p class="text-slate-500 text-body-sm mb-4">Can create templates and manage campaigns, but cannot change settings.</p>
<div class="flex items-center gap-2 text-slate-500 text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
5 users assigned
</div>
</div>
<!-- Agent Role Card -->
<div class="col-span-12 lg:col-span-4 bg-white p-card-padding rounded-xl shadow-sm border border-accent ring-1 ring-accent hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-sky-50 rounded-lg">
<span class="material-symbols-outlined text-accent" style="font-variation-settings: 'FILL' 1;">support_agent</span>
</div>
<span class="px-3 py-1 bg-accent text-white text-label-caps rounded-full">Editing Now</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Agent</h3>
<p class="text-slate-500 text-body-sm mb-4">Limited access to view analytics and respond to customer conversations.</p>
<div class="flex items-center gap-2 text-slate-500 text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
14 users assigned
</div>
</div>
</div>
<!-- Permission Matrix -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6 border-b border-slate-200 flex justify-between items-center bg-white">
<h3 class="font-title-sm text-title-sm">Permission Matrix: <span class="text-accent">Agent</span></h3>
<div class="flex gap-2">
<button class="px-4 py-2 border border-slate-300 rounded-lg text-body-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors">Discard</button>
<button class="px-6 py-2 bg-primary text-white rounded-lg text-body-sm font-bold hover:bg-primary-light transition-opacity">Save Changes</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-slate-50/50">
<th class="py-4 px-6 text-label-caps text-slate-500 uppercase tracking-wider">Module / Permission</th>
<th class="py-4 px-6 text-label-caps text-slate-500 text-center uppercase tracking-wider">View</th>
<th class="py-4 px-6 text-label-caps text-slate-500 text-center uppercase tracking-wider">Create/Edit</th>
<th class="py-4 px-6 text-label-caps text-slate-500 text-center uppercase tracking-wider">Delete</th>
<th class="py-4 px-6 text-label-caps text-slate-500 text-center uppercase tracking-wider">Manage All</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- Group 1: Campaigns -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-slate-400">campaign</span>
<span class="font-title-sm text-[15px] text-slate-700">Manage Campaigns</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
</tr>
<!-- Group 2: Analytics -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-slate-400">monitoring</span>
<span class="font-title-sm text-[15px] text-slate-700">View Analytics</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
</tr>
<!-- Group 3: Settings -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-slate-400">settings</span>
<span class="font-title-sm text-[15px] text-slate-700">Edit Settings</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
</tr>
<!-- Group 4: Billing -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-slate-400">payments</span>
<span class="font-title-sm text-[15px] text-slate-700">Billing &amp; Invoices</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-slate-200 rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform shadow-sm"></div>
</div>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Footer Log & Help Section -->
<div class="mt-8 grid grid-cols-12 gap-6">
<div class="col-span-12 lg:col-span-8 bg-white p-6 rounded-xl shadow-sm border border-slate-200">
<div class="flex items-center justify-between mb-6">
<h3 class="font-title-sm text-title-sm text-primary">Audit Log: Recent Changes</h3>
<a class="text-accent text-body-sm font-bold hover:underline" href="#">View All</a>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b border-slate-100 last:border-0">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center border border-slate-100">
<span class="material-symbols-outlined text-accent">person_edit</span>
</div>
<div>
<p class="text-body-md font-semibold text-slate-800">Admin updated 'Agent' permissions</p>
<p class="text-body-sm text-slate-500">Changed 'View Analytics' from OFF to ON</p>
</div>
</div>
<span class="text-label-caps text-slate-400">2 mins ago</span>
</div>
<div class="flex items-center justify-between py-3 border-b border-slate-100 last:border-0">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center border border-slate-100">
<span class="material-symbols-outlined text-accent">add_circle</span>
</div>
<div>
<p class="text-body-md font-semibold text-slate-800">Created new role: 'Reporting Only'</p>
<p class="text-body-sm text-slate-500">Assigned to 0 users</p>
</div>
</div>
<span class="text-label-caps text-slate-400">4 hours ago</span>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4 bg-primary text-white p-6 rounded-xl shadow-lg relative overflow-hidden group">
<div class="relative z-10">
<h3 class="font-headline-md text-[20px] mb-2">Need help?</h3>
<p class="opacity-80 text-body-sm mb-6">Learn more about how to set up granular access for high-security enterprise environments.</p>
<button class="bg-white text-primary px-5 py-2 rounded-lg font-bold text-body-sm hover:bg-slate-50 transition-colors">Documentation</button>
</div>
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-[120px] opacity-10 group-hover:scale-110 transition-transform">lock_person</span>
</div>
</div>
</div>
</main>
</div>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 KiB

435
stitch_bizone/contacts_list_whatsapp_business_admin/code.html
View File

@ -1,435 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Contacts | WhatsApp Business 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&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": {
"on-primary-fixed-variant": "#005322",
"tertiary": "#93492e",
"outline-variant": "#bbcbb9",
"surface-container-low": "#edf6e9",
"surface-card": "#FFFFFF",
"on-background": "#151e16",
"inverse-primary": "#3de273",
"on-tertiary": "#ffffff",
"on-error-container": "#93000a",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-container": "#ffa07e",
"primary-fixed": "#66ff8e",
"secondary-fixed": "#8ff4e3",
"on-surface-variant": "#3c4a3d",
"on-primary-container": "#005523",
"surface-bright": "#f3fcef",
"status-error": "#EF4444",
"on-tertiary-fixed": "#380d00",
"surface-variant": "#dce5d8",
"on-primary-fixed": "#002109",
"background": "#f3fcef",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary": "#ffffff",
"secondary-container": "#8cf1e1",
"surface": "#f3fcef",
"primary-fixed-dim": "#3de273",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface-tint": "#006d2f",
"secondary-fixed-dim": "#72d8c8",
"primary-container": "#25d366",
"inverse-surface": "#2a332a",
"on-secondary": "#ffffff",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"status-info": "#3B82F6",
"surface-container-high": "#e2ebde",
"border-subtle": "#E2E8F0",
"secondary": "#006b5f",
"text-secondary": "#64748B",
"tertiary-fixed": "#ffdbcf",
"inverse-on-surface": "#eaf3e6",
"surface-container-lowest": "#ffffff",
"surface-container": "#e7f1e4",
"status-success": "#25D366",
"error-container": "#ffdad6",
"surface-dim": "#d3ddd0",
"on-error": "#ffffff",
"background-main": "#F8F9FA",
"outline": "#6c7b6b",
"on-secondary-fixed-variant": "#005047",
"text-primary": "#1A1C1E",
"surface-container-highest": "#dce5d8",
"on-secondary-fixed": "#00201c",
"status-warning": "#F59E0B"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"toolbar-height": "64px",
"card-padding": "20px",
"base": "8px",
"sidebar-width": "260px",
"gutter": "24px",
"container-margin": "32px"
},
"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": ["jetbrainsMono"]
},
"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 { font-family: 'Inter', sans-serif; }
.sidebar-active { color: #006d2f !important; font-weight: 700; }
</style>
</head>
<body class="bg-background 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-10 px-4">
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
<p class="font-body-sm text-on-surface-variant opacity-70">Admin Console</p>
</div>
<button class="mb-8 mx-2 bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-title-sm flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
<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-inherit">dashboard</span>
<span>Dashboard</span>
</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 text-inherit">chat</span>
<span>Conversations</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg font-body-md sidebar-active bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-inherit" style="font-variation-settings: 'FILL' 1;">contacts</span>
<span>Contacts</span>
</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 text-inherit">description</span>
<span>Templates</span>
</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 text-inherit">webhook</span>
<span>Webhooks</span>
</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 text-inherit">monitoring</span>
<span>Analytics</span>
</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 text-inherit">settings</span>
<span>Settings</span>
</a>
</nav>
<div class="pt-6 mt-6 border-t border-surface-variant/30 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 text-inherit">help</span>
<span>Help Center</span>
</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 text-error" href="#">
<span class="material-symbols-outlined text-inherit">logout</span>
<span>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 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full font-body-sm focus:ring-2 focus:ring-primary/20" placeholder="Search contacts..." type="text"/>
</div>
<div class="flex gap-4 font-title-sm">
<a class="text-primary font-bold border-b-2 border-primary pb-4 mt-4" href="#">English</a>
<a class="text-on-surface-variant hover:text-primary transition-all pb-4 mt-4" href="#">Bahasa</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors relative">
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
</button>
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
</button>
<div class="h-8 w-px bg-surface-variant mx-2"></div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="font-body-sm font-semibold">Admin User</p>
<p class="text-[10px] text-on-surface-variant uppercase tracking-wider">Premium Account</p>
</div>
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border-2 border-primary/10 object-cover" data-alt="A professional headshot of a smiling middle-aged corporate administrator with clean skin and neat hair. The background is a soft, blurred modern office environment with high-key natural lighting and a cool, airy aesthetic. The image reflects a trustworthy and professional persona suitable for an enterprise dashboard profile." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFClYMJghQuF6S9w8kbhJJgHphR68t-g4aGf5dG5IWjc_XHYDwH72A55nGFsKAA84nE75x9lBhBRFg36EP9FWYueHY3XLXjaaRhwi5seUMbg_SVkBMpnMH7kDjk0IPAD_wOnBHFYLUpg1CI9p52TydmEAR7x48DiSo9oomdt5rsFhHflnC6rl7L9uyUJZiRk4NjzuR-hNjo0r9jcYJpOkaSNFKYYezP9dWPP0rQOS7jknyvw8QE4KbQXFj4qJfq_cNEtwNYuG5-JE"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="ml-[260px] pt-[64px] min-h-screen p-container-margin">
<!-- Header Actions Area -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
<div>
<h2 class="font-display-lg text-display-lg text-on-surface">Contacts Directory</h2>
<p class="font-body-md text-on-surface-variant">Manage your customer database and communication segments.</p>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-outline-variant font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-[20px]">upload</span>
Import
</button>
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-outline-variant font-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-[20px]">download</span>
Export
</button>
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-on-primary font-body-md hover:opacity-90 transition-opacity shadow-sm">
<span class="material-symbols-outlined text-[20px]">person_add</span>
Add Contact
</button>
</div>
</div>
<!-- Filter Bar -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm p-4 mb-6 flex flex-wrap items-center gap-4 border border-surface-variant/10">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">filter_list</span>
<span class="font-label-caps uppercase text-[11px] tracking-widest">Filters</span>
</div>
<div class="relative">
<select class="appearance-none bg-surface-container-low border-none rounded-lg py-2 pl-4 pr-10 font-body-sm text-on-surface focus:ring-1 focus:ring-primary/30">
<option>All Statuses</option>
<option>Active</option>
<option>Inactive</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant text-[18px]">expand_more</span>
</div>
<div class="relative">
<select class="appearance-none bg-surface-container-low border-none rounded-lg py-2 pl-4 pr-10 font-body-sm text-on-surface focus:ring-1 focus:ring-primary/30">
<option>All Tags</option>
<option>VIP Customer</option>
<option>Support</option>
<option>Lead</option>
<option>Wholesale</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant text-[18px]">expand_more</span>
</div>
<div class="relative">
<input class="bg-surface-container-low border-none rounded-lg py-2 px-4 font-body-sm text-on-surface focus:ring-1 focus:ring-primary/30" onfocus="(this.type='date')" placeholder="Date Added" type="text"/>
</div>
<button class="ml-auto text-primary font-label-caps uppercase text-[11px] hover:underline underline-offset-4">
Clear all filters
</button>
</div>
<!-- Main Data Table Container -->
<div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-surface-variant/10 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-4 font-label-caps text-on-surface-variant uppercase tracking-wider text-[11px]">
<div class="flex items-center gap-2">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
Contact Name
</div>
</th>
<th class="px-6 py-4 font-label-caps text-on-surface-variant uppercase tracking-wider text-[11px]">Phone Number</th>
<th class="px-6 py-4 font-label-caps text-on-surface-variant uppercase tracking-wider text-[11px]">Status</th>
<th class="px-6 py-4 font-label-caps text-on-surface-variant uppercase tracking-wider text-[11px]">Tags</th>
<th class="px-6 py-4 font-label-caps text-on-surface-variant uppercase tracking-wider text-[11px]">Last Message</th>
<th class="px-6 py-4"></th>
</tr>
</thead>
<tbody class="divide-y divide-surface-variant/20">
<!-- Row 1 -->
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
<img alt="Sarah Johnson" class="w-10 h-10 rounded-full object-cover" data-alt="A detailed portrait of a young professional woman with a friendly expression. The lighting is soft and flattering, coming from a natural window source. The aesthetic is bright and clean, with a neutral background that emphasizes the subject's clarity and professionalism for a high-end UI user list." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOmLxR0EzZ5g06OxElGAqbvVRYY2qGNn35HmxND-HIf1U9WBl3RpPFUH5YRE6YNc2fEG_49795K8-hVjs4KYyfF6cBS3DsYcfUL55mFWPFfbglv2bAyTDPl01zurpaxuxolcDNnLUloVHHPz0TnAfDriv79doqmmgWr9WcPqN7yqKIrFdA8SbTUDyPdHvUbT-FoupSV3KnM5eEZ95arschDg2z2bUtz4vMpdKX3K_bszaCdicwXE7szT9saYVMSuX6DBFbuNJcN7c"/>
<div>
<p class="font-body-md font-semibold text-on-surface">Sarah Johnson</p>
<p class="text-[12px] text-on-surface-variant">sarah.j@example.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-on-surface">+1 (555) 012-3456</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-success/10 text-status-success">
Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex gap-1">
<span class="px-2 py-0.5 bg-secondary-container/30 text-on-secondary-container rounded text-[11px] font-semibold">VIP</span>
<span class="px-2 py-0.5 bg-surface-container-high text-on-surface-variant rounded text-[11px] font-semibold">Retail</span>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant text-body-sm">Oct 24, 2023</td>
<td class="px-6 py-4 text-right">
<button class="p-2 rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors opacity-0 group-hover:opacity-100">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
<div class="w-10 h-10 rounded-full bg-tertiary-container/30 flex items-center justify-center text-tertiary font-bold text-sm">MB</div>
<div>
<p class="font-body-md font-semibold text-on-surface">Michael Brown</p>
<p class="text-[12px] text-on-surface-variant">m.brown@corp.net</p>
</div>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-on-surface">+44 20 7946 0958</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-success/10 text-status-success">
Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex gap-1">
<span class="px-2 py-0.5 bg-surface-container-high text-on-surface-variant rounded text-[11px] font-semibold">Support</span>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant text-body-sm">Oct 23, 2023</td>
<td class="px-6 py-4 text-right">
<button class="p-2 rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors opacity-0 group-hover:opacity-100">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
<img alt="David Chen" class="w-10 h-10 rounded-full object-cover" data-alt="A high-resolution, professional portrait of an Asian businessman wearing a tailored suit. He has a calm, confident expression. The background is a clean, minimalistic architectural setting with neutral grey tones and soft, directional light that creates a premium, enterprise-grade look for a user directory." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfKfNls59WHxtZBeqbiI9D-ydCNnwFz0obimF8gbJOmTbc0-JN9UfEo7JElMyqR7M0MOm8QflP5O81YH5xqURvqtkk89H2Tjs8SDT3HI0fN_w6mxgvKElANs-FQYNQH6aRWtK6U0GbYvm5vfmA9bJgcFhfm7JtmqC6UAOCwaJd2eobzZ2KFC_88llvLJNL2AWYZmBcC5T7zc3U5Y-YeIechJ2FabAu1J11-G8mp4hLAlomlp3BXF3Psojoz2GhFyQMzWjr-e2R3VE"/>
<div>
<p class="font-body-md font-semibold text-on-surface">David Chen</p>
<p class="text-[12px] text-on-surface-variant">chen.d@logistics.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-on-surface">+65 6123 4567</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-on-surface-variant/10 text-on-surface-variant">
Inactive
</span>
</td>
<td class="px-6 py-4">
<div class="flex gap-1">
<span class="px-2 py-0.5 bg-primary-container/20 text-primary rounded text-[11px] font-semibold">Lead</span>
<span class="px-2 py-0.5 bg-surface-container-high text-on-surface-variant rounded text-[11px] font-semibold">New</span>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant text-body-sm">Sep 15, 2023</td>
<td class="px-6 py-4 text-right">
<button class="p-2 rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors opacity-0 group-hover:opacity-100">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
<img alt="Elena Rodriguez" class="w-10 h-10 rounded-full object-cover" data-alt="A bright, clear corporate headshot of a Latina business professional in a light-filled office space. She is smiling naturally, conveying warmth and approachability. The style is modern and high-key, using soft shadows and a pristine white and light blue color palette to match a professional enterprise SaaS dashboard." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXV96o4XidoYN_u4-d0JNRDAW2lN0k2LK1sODlS-dXn6ypDpG2p-WlpbVc5JGTcEBongeralnK9zZ6wzTiHa53IcOS0YsN1n8zte42wDgBhuREWEkyYTRRFkEsR7EAAOxHKAQE5GHnQ1Dwyy1nhxUWvxCD9fKlpjE0Wwu97kaLhy6Z93QhIGXqDclvScCRl-3m1oNl8kNjMZBgfiImqS-qy5ir80-hqhp-wL8prhJk_Ky7ge9X_mSnC9sWABobz7SoQUDharNszUc"/>
<div>
<p class="font-body-md font-semibold text-on-surface">Elena Rodriguez</p>
<p class="text-[12px] text-on-surface-variant">elena.rod@fintech.es</p>
</div>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-on-surface">+34 912 345 678</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-success/10 text-status-success">
Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex gap-1">
<span class="px-2 py-0.5 bg-secondary-container/30 text-on-secondary-container rounded text-[11px] font-semibold">Wholesale</span>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant text-body-sm">Oct 20, 2023</td>
<td class="px-6 py-4 text-right">
<button class="p-2 rounded-full hover:bg-surface-container-high text-on-surface-variant transition-colors opacity-0 group-hover:opacity-100">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-6 py-4 flex items-center justify-between bg-surface-container-low/30 border-t border-surface-variant/10">
<div class="text-on-surface-variant text-body-sm">
Showing <span class="font-semibold text-on-surface">1 - 4</span> of <span class="font-semibold text-on-surface">1,248</span> contacts
</div>
<div class="flex items-center gap-2">
<button class="p-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-low disabled:opacity-50 transition-colors" disabled="">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<div class="flex items-center gap-1">
<button class="w-8 h-8 rounded-lg bg-primary text-on-primary font-body-sm font-semibold">1</button>
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-low text-on-surface-variant font-body-sm font-semibold transition-colors">2</button>
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-low text-on-surface-variant font-body-sm font-semibold transition-colors">3</button>
<span class="px-1 text-on-surface-variant">...</span>
<button class="w-8 h-8 rounded-lg hover:bg-surface-container-low text-on-surface-variant font-body-sm font-semibold transition-colors">124</button>
</div>
<button class="p-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
<div class="flex items-center gap-3">
<span class="text-on-surface-variant text-body-sm">Rows per page:</span>
<select class="bg-transparent border-none font-body-sm text-on-surface focus:ring-0 cursor-pointer">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
</div>
<!-- FAB (Relevance Check: Suppressed on Details, but present on high-level list) -->
<button class="fixed bottom-10 right-10 w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform z-50">
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">add</span>
</button>
</main>
</body></html>

BIN
stitch_bizone/contacts_list_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 252 KiB

453
stitch_bizone/conversations_bizone_standard_layout/code.html Normal file
View File

@ -0,0 +1,453 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WhatsApp Business Admin - Outbound Messages</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;600;700&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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-tertiary": "#ffffff",
"surface-card": "#FFFFFF",
"surface-variant": "#dce5d8",
"primary-container": "#e0f2fe",
"outline-variant": "#E2E8F0",
"outline": "#64748B",
"secondary": "#0ea5e9",
"surface-bright": "#f8fafc",
"tertiary": "#93492e",
"surface-dim": "#f1f5f9",
"surface-tint": "#001b44",
"on-tertiary-fixed": "#380d00",
"primary-fixed": "#66ff8e",
"status-info": "#3B82F6",
"on-tertiary-container": "#78351b",
"tertiary-container": "#ffa07e",
"surface-container-highest": "#dce5d8",
"inverse-primary": "#3de273",
"on-surface-variant": "#64748B",
"background-main": "#F8F9FA",
"on-error-container": "#93000a",
"primary-fixed-dim": "#3de273",
"primary": "#001b44",
"background": "#F8F9FA",
"surface-container-high": "#f1f5f9",
"on-surface": "#0f172a",
"surface-container-low": "#f8fafc",
"on-primary-fixed-variant": "#005322",
"secondary-container": "#e0f2fe",
"secondary-fixed": "#8ff4e3",
"on-error": "#ffffff",
"secondary-fixed-dim": "#72d8c8",
"surface-container": "#f1f5f9",
"text-secondary": "#64748B",
"status-warning": "#F59E0B",
"status-error": "#EF4444",
"surface": "#ffffff",
"on-primary": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-success": "#10b981",
"on-primary-fixed": "#002109",
"on-primary-container": "#001b44",
"on-secondary-fixed": "#00201c",
"on-tertiary-fixed-variant": "#763319",
"on-secondary": "#ffffff",
"error-container": "#ffdad6",
"inverse-surface": "#0f172a",
"on-secondary-fixed-variant": "#005047",
"text-primary": "#0f172a",
"on-secondary-container": "#0ea5e9",
"error": "#ba1a1a",
"on-background": "#0f172a",
"tertiary-fixed-dim": "#ffb59b",
"inverse-on-surface": "#f1f5f9",
"tertiary-fixed": "#ffdbcf",
"border-subtle": "#E2E8F0",
"brand-navy": "#001b44",
"brand-blue": "#0ea5e9"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"card-padding": "20px",
"toolbar-height": "72px",
"gutter": "24px",
"sidebar-width": "260px",
"base": "8px",
"container-margin": "32px"
},
"fontFamily": {
"label-caps": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"title-sm": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"mono-code": ["jetbrainsMono"],
"body-sm": ["Inter"]
},
"fontSize": {
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
background-color: #F8F9FA;
font-family: 'Inter', sans-serif;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="flex min-h-screen text-on-surface">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-screen w-sidebar-width bg-brand-navy flex flex-col z-50">
<!-- Sidebar Header -->
<div class="h-[72px] bg-white flex items-center px-6 border-b border-outline-variant">
<img alt="BizOne Logo" class="h-8 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 px-4 mt-8">
<a class="flex items-center gap-3 text-white/70 px-4 py-3 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="text-body-sm font-body-sm">Dashboard</span>
</a>
<a class="flex items-center gap-3 bg-brand-blue text-white rounded-lg px-4 py-3 active:scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="outbound" style="font-variation-settings: 'FILL' 1;">outbound</span>
<span class="text-body-sm font-body-sm font-bold">Conversations</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="text-body-sm font-body-sm">Templates</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
<span class="text-body-sm font-body-sm">Webhooks</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-3 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span class="text-body-sm font-body-sm">Analytics</span>
</a>
</nav>
<div class="mt-auto flex flex-col gap-1 p-4 border-t border-white/10">
<button class="bg-brand-blue text-white rounded-lg py-3 px-4 mb-4 flex items-center justify-center gap-2 font-bold shadow-lg active:scale-95 transition-all">
<span class="material-symbols-outlined" data-icon="add">add</span>
New Message
</button>
<a class="flex items-center gap-3 text-white/70 px-4 py-2 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="text-body-sm font-body-sm">Settings</span>
</a>
<a class="flex items-center gap-3 text-white/70 px-4 py-2 hover:bg-white/10 transition-all rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span class="text-body-sm font-body-sm">Logout</span>
</a>
</div>
</aside>
<!-- Content Area -->
<main class="ml-[260px] flex-1 flex flex-col min-h-screen">
<!-- TopNavBar -->
<header class="flex justify-between items-center h-[72px] px-container-margin w-full sticky top-0 z-40 bg-white border-b border-outline-variant">
<div class="flex items-center gap-4">
<h2 class="text-headline-md font-headline-md font-bold text-brand-navy">Outbound Messages Center</h2>
</div>
<div class="flex items-center gap-6">
<div class="relative group">
<span class="absolute inset-y-0 left-3 flex items-center text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]" data-icon="search">search</span>
</span>
<input class="pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-full text-body-sm focus:ring-2 focus:ring-brand-blue w-64 transition-all" placeholder="Search broadcasts..." type="text"/>
</div>
<div class="flex items-center gap-2">
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-full relative">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-status-error rounded-full"></span>
</button>
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-full">
<span class="material-symbols-outlined" data-icon="help">help</span>
</button>
<div class="w-px h-6 bg-outline-variant mx-2"></div>
<div class="flex items-center gap-3 cursor-pointer group">
<img alt="Admin Avatar" class="w-8 h-8 rounded-full border border-outline-variant" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhCOCkWIqy-M9ZWH2B2kpI1UXX2GDnnBmGOwDW7vJg3UNm3_yqrA_LXYCvA_0RHS8u5LTirbcbintQDDYoWSHF8s7tE7lAypNsEqhSoU5QjQBVnZogyfmOU5Xa_1WvpTg4BO3lQ_RHoH3uZv82bAUe4K4oEZrGmfVe1d8XUc2sEg9SZGxqCSmFapuPU2oprEU1bVk79GGBrviwDdoRLH5fHkQsPt-0tJhAN-CCAVftzoyTon7K7uifay1-z4WTV6u8z67bYBD0LMs"/>
<span class="text-body-sm font-bold text-on-surface group-hover:text-brand-blue transition-colors">Admin User</span>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<div class="p-container-margin space-y-gutter">
<!-- Summary Section / KPI Grid -->
<section class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-gutter">
<div class="bg-surface-card p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-1">
<div class="flex justify-between items-start">
<span class="text-label-caps font-label-caps text-on-surface-variant">QUEUED</span>
<div class="p-2 bg-primary-container rounded-lg text-brand-navy">
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
</div>
</div>
<span class="text-display-lg font-display-lg text-on-surface">1,284</span>
<div class="flex items-center gap-1 text-status-success text-[12px] font-bold">
<span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
<span>12% from last hour</span>
</div>
</div>
<div class="bg-surface-card p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-1">
<div class="flex justify-between items-start">
<span class="text-label-caps font-label-caps text-on-surface-variant">SCHEDULED TODAY</span>
<div class="p-2 bg-blue-50 rounded-lg text-status-info">
<span class="material-symbols-outlined" data-icon="event">event</span>
</div>
</div>
<span class="text-display-lg font-display-lg text-on-surface">42</span>
<span class="text-body-sm font-body-sm text-on-surface-variant">Next: 14:00 PM (Market Update)</span>
</div>
<div class="bg-surface-card p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-1">
<div class="flex justify-between items-start">
<span class="text-label-caps font-label-caps text-on-surface-variant">TOTAL SENT (MONTH)</span>
<div class="p-2 bg-primary-container rounded-lg text-brand-navy">
<span class="material-symbols-outlined" data-icon="send">send</span>
</div>
</div>
<span class="text-display-lg font-display-lg text-on-surface">148.5k</span>
<div class="flex items-center gap-1 text-on-surface-variant text-[12px] font-bold">
<span class="material-symbols-outlined text-[16px]" data-icon="check_circle">check_circle</span>
<span>98.2% Delivery Rate</span>
</div>
</div>
<!-- Action Card -->
<div class="bg-brand-navy p-card-padding rounded-xl shadow-lg flex flex-col justify-between">
<div>
<h3 class="text-title-sm font-headline-md text-white">Quick Actions</h3>
<p class="text-body-sm font-body-sm text-white/70">Start a new campaign or update your message templates.</p>
</div>
<div class="flex gap-2 mt-4">
<button class="flex-1 bg-brand-blue text-white py-2 rounded-lg text-label-caps font-bold active:scale-95 transition-all">NEW BROADCAST</button>
<button class="flex-1 border border-white/20 text-white py-2 rounded-lg text-label-caps font-bold hover:bg-white/10 transition-all">TEMPLATES</button>
</div>
</div>
</section>
<!-- Main Content Area -->
<section class="bg-surface-card rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<!-- Tabs -->
<div class="flex items-center px-6 border-b border-outline-variant bg-surface-container-low">
<button class="px-6 py-4 text-brand-blue font-bold border-b-2 border-brand-blue text-body-sm">Outbound Queue</button>
<button class="px-6 py-4 text-on-surface-variant hover:text-on-surface transition-colors text-body-sm">Drafts</button>
<button class="px-6 py-4 text-on-surface-variant hover:text-on-surface transition-colors text-body-sm">Scheduled Broadcasts</button>
<button class="px-6 py-4 text-on-surface-variant hover:text-on-surface transition-colors text-body-sm">Broadcast History</button>
<div class="ml-auto flex items-center gap-3 py-2">
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high transition-all rounded-lg">
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
</button>
<button class="p-2 text-on-surface-variant hover:bg-surface-container-high transition-all rounded-lg">
<span class="material-symbols-outlined" data-icon="download">download</span>
</button>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Campaign / Message Name</th>
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Scheduled Time</th>
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Recipients</th>
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-status-warning"></div>
<div>
<p class="text-body-sm font-bold text-on-surface">Summer Flash Sale Notification</p>
<p class="text-[12px] text-on-surface-variant">ID: BROAD-92384</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-full text-[12px] font-bold">Broadcast</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface">Oct 24, 2023 · 14:00 PM</td>
<td class="px-6 py-4 text-body-sm text-on-surface">12,400 users</td>
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 text-status-warning text-[12px] font-bold">
<span class="material-symbols-outlined text-[14px]" data-icon="pending">pending</span>
Pending Approval
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-brand-blue transition-all">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-status-info"></div>
<div>
<p class="text-body-sm font-bold text-on-surface">Weekly Newsletter Update</p>
<p class="text-[12px] text-on-surface-variant">ID: TMPL-11202</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-secondary-container text-on-secondary-container rounded-full text-[12px] font-bold">Template</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface">Oct 25, 2023 · 09:00 AM</td>
<td class="px-6 py-4 text-body-sm text-on-surface">45,000 users</td>
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-status-info text-[12px] font-bold">
<span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span>
Scheduled
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-brand-blue transition-all">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/30 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-brand-blue"></div>
<div>
<p class="text-body-sm font-bold text-on-surface">Order Confirmation Flow</p>
<p class="text-[12px] text-on-surface-variant">ID: AUTO-44129</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-primary-container text-brand-blue rounded-full text-[12px] font-bold">Automation</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface">Real-time Trigger</td>
<td class="px-6 py-4 text-body-sm text-on-surface">Dynamic</td>
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 text-status-success text-[12px] font-bold">
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle">check_circle</span>
Active
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-brand-blue transition-all">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 border-t border-outline-variant flex items-center justify-between">
<p class="text-body-sm text-on-surface-variant">Showing 1 to 10 of 42 campaigns</p>
<div class="flex items-center gap-2">
<button class="p-2 border border-outline-variant rounded-lg hover:bg-surface-container-low disabled:opacity-50" disabled="">
<span class="material-symbols-outlined" data-icon="chevron_left">chevron_left</span>
</button>
<button class="w-10 h-10 flex items-center justify-center bg-brand-blue text-white rounded-lg text-body-sm font-bold">1</button>
<button class="w-10 h-10 flex items-center justify-center text-on-surface hover:bg-surface-container-low rounded-lg text-body-sm">2</button>
<button class="w-10 h-10 flex items-center justify-center text-on-surface hover:bg-surface-container-low rounded-lg text-body-sm">3</button>
<button class="p-2 border border-outline-variant rounded-lg hover:bg-surface-container-low">
<span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
</button>
</div>
</div>
</section>
<!-- Bento Preview Grid (Drafts & Quick Links) -->
<section class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Template Preview -->
<div class="md:col-span-4 bg-surface-card rounded-xl p-card-padding shadow-sm border border-outline-variant flex flex-col gap-4">
<div class="flex justify-between items-center">
<h3 class="text-title-sm font-headline-md text-on-surface">Template Preview</h3>
<span class="text-label-caps text-brand-blue cursor-pointer hover:underline">Edit Template</span>
</div>
<div class="bg-surface-container-low rounded-lg p-4 flex-1 flex flex-col gap-3">
<div class="bg-white rounded-lg p-3 shadow-sm max-w-[85%] border-l-4 border-brand-blue self-start">
<p class="text-[13px] text-on-surface mb-1">Hello <span class="text-brand-blue font-bold">{{1}}</span>!</p>
<p class="text-[13px] text-on-surface mb-2">Your order <span class="font-bold">#{{2}}</span> has been shipped and is on its way to you.</p>
<p class="text-[11px] text-on-surface-variant italic">10:45 AM</p>
</div>
<div class="flex flex-col gap-1 w-full items-center">
<button class="w-full bg-white text-brand-blue text-[12px] font-bold py-2 rounded shadow-sm border border-outline-variant">Track Package</button>
<button class="w-full bg-white text-brand-blue text-[12px] font-bold py-2 rounded shadow-sm border border-outline-variant">View Details</button>
</div>
</div>
<div class="flex items-center gap-2">
<img alt="Mobile Preview" class="w-8 h-8 opacity-50" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiz96vHEWvBeWwYHZMK9exIt-KcXC-g-Zaz4DGTlVD38qjFn_YiMnPUOW1pJJl0YC35HrMzWdmrmZ-Fu1vG6viB5aarSBZ0yrDAH4YCsjfJoz4IKZzD7XdDMlGaSTw1cRQkVYvTmd8ztHjm2V7vUbHeq5o7FVJbN_Hn7gXDeDNQ4_uVAV11U_BjDhgxOsBnS2k8pfSTy1bkZoV-xBw4Z4M9kfEY-bxig9b-5Ow1wB2q4URIyfj8EuM8R1Zh5YlfDVgE1pb4axRAh0"/>
<p class="text-body-sm text-on-surface-variant italic text-[12px]">Mockup of "Shipping_Confirmation" mobile view</p>
</div>
</div>
<!-- Recent Activity Feed -->
<div class="md:col-span-8 bg-surface-card rounded-xl p-card-padding shadow-sm border border-outline-variant">
<div class="flex justify-between items-center mb-6">
<h3 class="text-title-sm font-headline-md text-on-surface">Queue Analytics (Live)</h3>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-label-caps text-on-surface-variant">System Optimal</span>
</div>
</div>
<div class="h-48 w-full bg-surface-container-low rounded-lg relative overflow-hidden flex items-end px-4 pb-2 gap-2">
<!-- Simplified Sparkline Bars -->
<div class="flex-1 bg-brand-blue/20 h-[30%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/30 h-[45%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/40 h-[25%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/50 h-[60%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/60 h-[80%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/40 h-[40%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/30 h-[20%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/50 h-[55%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/70 h-[90%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/40 h-[35%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue/30 h-[25%] rounded-t-sm"></div>
<div class="flex-1 bg-brand-blue h-[100%] rounded-t-sm"></div>
<div class="absolute inset-0 flex flex-col justify-center items-center pointer-events-none">
<p class="text-display-lg font-bold text-brand-navy">850 ms</p>
<p class="text-label-caps text-on-surface-variant">Avg. Queue Latency</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<div class="text-center p-3 border border-outline-variant rounded-lg">
<p class="text-label-caps text-on-surface-variant">API THROTTLING</p>
<p class="text-title-sm font-bold text-on-surface">0.02%</p>
</div>
<div class="text-center p-3 border border-outline-variant rounded-lg">
<p class="text-label-caps text-on-surface-variant">QUEUE SIZE</p>
<p class="text-title-sm font-bold text-on-surface">1,204</p>
</div>
<div class="text-center p-3 border border-outline-variant rounded-lg">
<p class="text-label-caps text-on-surface-variant">SEND RATE</p>
<p class="text-title-sm font-bold text-on-surface">250/sec</p>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Floating Action Button -->
<button class="fixed bottom-8 right-8 w-14 h-14 bg-brand-blue text-white rounded-full shadow-xl flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-50">
<span class="material-symbols-outlined text-[32px]" data-icon="add">add</span>
</button>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

410
stitch_bizone/conversations_whatsapp_business_admin/code.html
View File

@ -1,410 +0,0 @@
<!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 - Conversations</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": {
"on-primary-fixed-variant": "#005322",
"tertiary": "#93492e",
"outline-variant": "#bbcbb9",
"surface-container-low": "#edf6e9",
"surface-card": "#FFFFFF",
"on-background": "#151e16",
"inverse-primary": "#3de273",
"on-tertiary": "#ffffff",
"on-error-container": "#93000a",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-container": "#ffa07e",
"primary-fixed": "#66ff8e",
"secondary-fixed": "#8ff4e3",
"on-surface-variant": "#3c4a3d",
"on-primary-container": "#005523",
"surface-bright": "#f3fcef",
"status-error": "#EF4444",
"on-tertiary-fixed": "#380d00",
"surface-variant": "#dce5d8",
"on-primary-fixed": "#002109",
"background": "#f3fcef",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary": "#ffffff",
"secondary-container": "#8cf1e1",
"surface": "#f3fcef",
"primary-fixed-dim": "#3de273",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface-tint": "#006d2f",
"secondary-fixed-dim": "#72d8c8",
"primary-container": "#25d366",
"inverse-surface": "#2a332a",
"on-secondary": "#ffffff",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"status-info": "#3B82F6",
"surface-container-high": "#e2ebde",
"border-subtle": "#E2E8F0",
"secondary": "#006b5f",
"text-secondary": "#64748B",
"tertiary-fixed": "#ffdbcf",
"inverse-on-surface": "#eaf3e6",
"surface-container-lowest": "#ffffff",
"surface-container": "#e7f1e4",
"status-success": "#25D366",
"error-container": "#ffdad6",
"surface-dim": "#d3ddd0",
"on-error": "#ffffff",
"background-main": "#F8F9FA",
"outline": "#6c7b6b",
"on-secondary-fixed-variant": "#005047",
"text-primary": "#1A1C1E",
"surface-container-highest": "#dce5d8",
"on-secondary-fixed": "#00201c",
"status-warning": "#F59E0B"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"toolbar-height": "64px",
"card-padding": "20px",
"base": "8px",
"sidebar-width": "260px",
"gutter": "24px",
"container-margin": "32px"
},
"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
}
.chat-scrollbar::-webkit-scrollbar {
width: 4px
}
.chat-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px
}
.bg-chat-pattern {
background-color: #e5ddd5;
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDoAQm11A1XNtXffbNYVUqrG-KGwI_AU16Q4NehtwhqbAeWeVHy23hpmpxJVpeXbqvwxzbySoMvRborQKPbcMWuKOF12sbzWSJOPdHyBLKO5kpjbYJQaMZRgfGMLbBaTKd7LrmHKXaeFUMp-KjbX1EskdWNHJD5qLU4rwq4MA5WnLYtzW3-LhsnZDhVShARfAG3X_vYEmrYjx3Papx_Qmlna8InK3YN2dLGKZn7lju4nEkjnNAPqnNmVM8IG_QHDujt6SRWlK0M8gw)
}</style>
</head>
<body class="bg-surface font-body-md text-on-surface overflow-hidden">
<!-- SideNavBar Anchor -->
<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-on-surface-variant font-label-caps opacity-70">Admin Console</p>
</div>
<button class="mb-6 mx-2 py-3 px-4 bg-primary text-on-primary rounded-xl font-title-sm flex items-center justify-center gap-2 shadow-sm hover:opacity-90 transition-all">
<span class="material-symbols-outlined">add</span>
<span>New Broadcast</span>
</button>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-primary font-bold bg-surface-container-low" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">contacts</span>
<span class="font-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">webhook</span>
<span class="font-body-md">Webhooks</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span class="font-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto border-t border-surface-variant pt-4 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
<span class="font-body-md">Help Center</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-md">Logout</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="fixed top-0 right-0 w-[calc(100%-260px)] h-full flex flex-col">
<!-- TopNavBar Anchor -->
<header class="h-toolbar-height 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-80">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-sm">search</span>
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 text-body-sm focus:ring-1 focus:ring-primary" placeholder="Search conversations..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex gap-4 mr-4 text-on-surface-variant font-label-caps">
<span class="cursor-pointer hover:text-primary transition-colors">English</span>
<span class="cursor-pointer hover:text-primary transition-colors border-b-2 border-primary text-primary font-bold">Bahasa</span>
</div>
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors text-on-surface-variant">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-container-low transition-colors text-on-surface-variant">
<span class="material-symbols-outlined">settings</span>
</button>
<img alt="Admin Profile Image" class="w-10 h-10 rounded-full object-cover ring-2 ring-primary/10" data-alt="A professional headshot of a corporate admin user with a confident expression, wearing a tailored navy blazer in a high-end, brightly lit modern office environment. The image is crisp with soft bokeh backgrounds and reflects a premium enterprise SaaS aesthetic with clean, professional lighting and a trustworthy mood." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgm5EB9-O65hNopcHWiNXeBWyPsA_FEa3oGruSwb2UELDeEOro5ooYClkeRwjX3gdc2k6S7jFAnc5nksVpUR8OILUGepkGB7YYdyiyRGWJd_k92TvdqUKYEsrc-MBWsinr9DD6kAaBIbRKhy1wAmF_mQt8MfFhR06RlSi2Iyx__rLGs9jU70ME-0zO7sRdBG1UixWsqLNDLv49w2r_4p0AAZZ5_unhSbeUbees2pHJGamLL__SpfzFtXHDJJinjV2DzsrTdGkv-lg"/>
</div>
</header>
<!-- Inbox Layout -->
<div class="flex-1 flex overflow-hidden">
<!-- Conversation List (Left Panel) -->
<section class="w-[380px] border-r border-surface-variant bg-surface-container-lowest flex flex-col">
<div class="p-4 border-b border-surface-variant flex justify-between items-center">
<span class="font-title-sm text-on-surface">Inbox</span>
<div class="flex gap-1">
<button class="p-2 hover:bg-surface-container-low rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">filter_list</span>
</button>
<button class="p-2 hover:bg-surface-container-low rounded-lg text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit_square</span>
</button>
</div>
</div>
<div class="flex-1 overflow-y-auto chat-scrollbar">
<!-- Active Thread -->
<div class="flex gap-3 p-4 bg-primary-container/10 border-l-4 border-primary cursor-pointer hover:bg-primary-container/20 transition-colors">
<img class="w-12 h-12 rounded-full object-cover" data-alt="Close up portrait of a young woman with a friendly smile, professional attire, against a minimalist soft green studio background. The lighting is bright and airy, perfect for a high-quality user profile image in a professional business communication app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjX7fb-PWWr1stIiWJn9MuYTZ7AR2kzFR0O2px4arskCZ6kmwLdvrhcHHGnbVBx1MCbmHiWIgEyLfvqRNeSc0DzemwQarugQ529BFN50avW0mdt3VkPz9equ1EuteqsuK7Fg0C0dFIjvGtffxoRKo35gsygO7LbENMpsm7ErP9IgFcf_ex2PoNslds-eozO4ZsQ1qaIL_m-pVtFG1KF0OHLCr5zaJ_lM9eVzJSo7ZY3A2L1p-wPPgBnzgTSbhC-xH15oNxrz5GDus"/>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline mb-1">
<h4 class="font-title-sm text-body-md text-on-surface truncate">Sarah Jenkins</h4>
<span class="text-[11px] text-primary font-bold">14:25</span>
</div>
<div class="flex justify-between items-center">
<p class="text-body-sm text-on-surface-variant truncate">I'd like to confirm the shipping status of order #5521...</p>
<span class="bg-primary text-on-primary text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full">3</span>
</div>
</div>
</div>
<!-- Thread 2 -->
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container font-bold">
MK
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline mb-1">
<h4 class="font-body-md text-on-surface truncate">Marcus Knight</h4>
<span class="text-[11px] text-on-surface-variant">12:10</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate">Great, thank you for the update!</p>
</div>
</div>
<!-- Thread 3 -->
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
<img class="w-12 h-12 rounded-full object-cover" data-alt="A portrait of a male professional with a neutral, polite expression. He is wearing a grey sweater in a clean, brightly lit modern interior with plants in the background. The aesthetic is clean, corporate, and high-fidelity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCX2DzvHKS0Ic87fLZ2mQunlApgaQRM6o9pza58vdGeJ25HfuxMCGf-QN30-_unA68q1cP2HtXfOrEcsMAo9mEBcR31D6kRE5JjaPqsjXhNC0jBQX73Zf-XWrHf_mh7KU2EVa1WlDacCAKfnUm5NcKZR-MRWeG62a6KxerPqBQEwoJwHcBtBxMx_YvjehMxCgKZX3yox2wkh787T9nIYjFKk51VHSJ9taDARFjcjXBpKAATtocLrgWuPJS24DRLTmlfI-44YV6uHbA"/>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline mb-1">
<h4 class="font-body-md text-on-surface truncate">David Chen</h4>
<span class="text-[11px] text-on-surface-variant">Yesterday</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate">Is it possible to change the delivery address?</p>
</div>
</div>
<!-- Thread 4 -->
<div class="flex gap-3 p-4 border-b border-surface-variant/50 cursor-pointer hover:bg-surface-container-low transition-colors">
<div class="w-12 h-12 rounded-full bg-tertiary-container flex items-center justify-center text-on-tertiary-container font-bold">
AR
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline mb-1">
<h4 class="font-body-md text-on-surface truncate">Anita Rao</h4>
<span class="text-[11px] text-on-surface-variant">Yesterday</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate">Payment successful. Confirmation received.</p>
</div>
</div>
</div>
</section>
<!-- Chat Panel (Center-Right) -->
<section class="flex-1 flex flex-col bg-surface overflow-hidden">
<!-- Chat Header -->
<header class="p-4 bg-surface-container-lowest border-b border-surface-variant flex justify-between items-center">
<div class="flex items-center gap-3">
<img class="w-10 h-10 rounded-full object-cover" data-alt="Profile photo of Sarah Jenkins, showing a high-resolution, bright, and professional close-up. The lighting is balanced and warm, set against a clean white and soft green background, matching the WhatsApp Business brand identity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBW-ixizxTjqnxR4iibtXfsmp-qzwan2DwULJztJdwEaT-cVQ5CgL7_z3QQvZsRfuGElX8GaTwdAadd27YKL_j-OIU4xqDTwjhDdmDzLrxp8_dquPpG4TktHNiB2XsT-895BHzgw-87awqkdUV8JtFFhkIrpHpUC7wlKkoQFR4hutzdKSgonoeRT3mhfP7QwHwkajf5tQgUw01hkEvgnnvW73ZfwKrymXa6b2rb0FHBosev9Lyt0-wNhBMgRjEu1G_sunmHUYxqY0w"/>
<div>
<h3 class="font-title-sm text-on-surface">Sarah Jenkins</h3>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-body-sm text-on-surface-variant">Online • Last active 2m ago</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<button class="px-3 py-1.5 border border-outline-variant rounded-lg text-body-sm text-on-surface-variant hover:bg-surface-container-low transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">info</span>
Details
</button>
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
<span class="material-symbols-outlined">more_vert</span>
</button>
</div>
</header>
<!-- Message History -->
<div class="flex-1 overflow-y-auto chat-scrollbar bg-chat-pattern p-gutter flex flex-col gap-4">
<div class="flex justify-center my-4">
<span class="bg-surface-container-high/60 backdrop-blur-sm text-on-surface-variant text-[12px] px-3 py-1 rounded-full font-label-caps uppercase tracking-wider">Today</span>
</div>
<!-- Received Message -->
<div class="flex flex-col items-start max-w-[70%]">
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
Hello! I'm interested in the premium subscription plan. Could you tell me more about the enterprise features?
</div>
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:10</span>
</div>
<!-- Sent Message -->
<div class="flex flex-col items-end max-w-[70%] self-end">
<div class="bg-primary-container p-3 rounded-tl-xl rounded-b-xl shadow-sm text-on-primary-container text-body-md">
Hi Sarah! Absolutely. Our enterprise plan includes unlimited broadcast lists, advanced analytics, and custom API integrations for your CRM.
</div>
<div class="flex items-center gap-1 mt-1 mr-1">
<span class="text-[10px] text-on-surface-variant/70">14:15</span>
<span class="material-symbols-outlined text-[14px] text-primary">done_all</span>
</div>
</div>
<!-- Received Message -->
<div class="flex flex-col items-start max-w-[70%]">
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
That sounds perfect. Do you offer a demo or a trial period for these features?
</div>
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:22</span>
</div>
<!-- Sent Message -->
<div class="flex flex-col items-end max-w-[70%] self-end">
<div class="bg-primary-container p-3 rounded-tl-xl rounded-b-xl shadow-sm text-on-primary-container text-body-md">
Yes, we can set up a 14-day trial for you. Would you like me to enable it for your current account?
</div>
<div class="flex items-center gap-1 mt-1 mr-1">
<span class="text-[10px] text-on-surface-variant/70">14:24</span>
<span class="material-symbols-outlined text-[14px] text-primary">done_all</span>
</div>
</div>
<!-- Received Message (Most Recent) -->
<div class="flex flex-col items-start max-w-[70%]">
<div class="bg-white p-3 rounded-tr-xl rounded-b-xl shadow-sm text-on-surface text-body-md">
I'd like to confirm the shipping status of order #5521 before we proceed with the upgrade. Is it out for delivery yet?
</div>
<span class="text-[10px] text-on-surface-variant/70 mt-1 ml-1">14:25</span>
</div>
</div>
<!-- Message Composer -->
<footer class="p-4 bg-surface-container-lowest border-t border-surface-variant">
<div class="flex items-center gap-2 mb-3">
<button class="flex items-center gap-1.5 px-3 py-1 bg-surface-container-low hover:bg-surface-container-high rounded-full text-label-caps text-primary transition-colors">
<span class="material-symbols-outlined text-[16px]">bolt</span>
Quick Replies
</button>
<button class="flex items-center gap-1.5 px-3 py-1 bg-surface-container-low hover:bg-surface-container-high rounded-full text-label-caps text-primary transition-colors">
<span class="material-symbols-outlined text-[16px]">description</span>
Send Template
</button>
</div>
<div class="flex items-center gap-3">
<div class="flex gap-1">
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
<span class="material-symbols-outlined">add</span>
</button>
<button class="p-2 hover:bg-surface-container-low rounded-full text-on-surface-variant">
<span class="material-symbols-outlined">mood</span>
</button>
</div>
<div class="flex-1 bg-surface-container-low rounded-xl px-4 py-2 flex items-center">
<input class="w-full bg-transparent border-none focus:ring-0 text-body-md" placeholder="Type a message..." type="text"/>
</div>
<button class="w-10 h-10 bg-primary text-on-primary rounded-full flex items-center justify-center shadow-sm hover:scale-105 transition-transform">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">send</span>
</button>
</div>
</footer>
</section>
<!-- Metadata Panel (Optional/Hidden on smaller widths) -->
<section class="w-[300px] border-l border-surface-variant bg-surface-container-lowest p-gutter hidden xl:flex flex-col gap-6">
<div class="text-center">
<img class="w-24 h-24 rounded-full object-cover mx-auto mb-3 shadow-md" data-alt="Large profile avatar for a customer named Sarah. The image is a studio portrait with high-key lighting, emphasizing clarity and professionalism. The background is a minimalist, light-toned aesthetic consistent with a modern corporate UI." src="https://lh3.googleusercontent.com/aida-public/AB6AXuARLBQPKSnVPIRQzo0YFTNjyoIf-sAR1oQPqEIFKHfvG5D4hPzLNw7d6uYEsg5spaNX8h2ChBcXsbBG3P0jBg6TAIhIPyv3nnNmYPtormU6O0_R8FDAWQqop9C4GHBsgctqPXYaqmBEm36-H1R0Ml61DOZh59Mjre0oFZwp9vTUsjzo9MXDtOVRHHOG9jy_RmNscwmjLzdBghKRj-nCZcfIQfQs-O6n8ozpvUBoGCkLjtOt0gtez99p43SsKLB8qjzEG4yi0J-ohIw"/>
<h3 class="font-headline-md text-title-sm text-on-surface">Sarah Jenkins</h3>
<p class="text-body-sm text-on-surface-variant">London, United Kingdom</p>
</div>
<div class="space-y-4">
<div>
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-1">Contact Details</span>
<div class="space-y-2">
<div class="flex items-center gap-2 text-body-sm">
<span class="material-symbols-outlined text-primary text-[18px]">phone</span>
+44 20 7123 4567
</div>
<div class="flex items-center gap-2 text-body-sm">
<span class="material-symbols-outlined text-primary text-[18px]">mail</span>
s.jenkins@enterprise.com
</div>
</div>
</div>
<div>
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-1">Active Subscriptions</span>
<span class="inline-block px-3 py-1 bg-secondary-container text-on-secondary-container text-[12px] font-bold rounded-full">Pro Plan</span>
</div>
<div class="pt-4 border-t border-surface-variant">
<span class="font-label-caps text-on-surface-variant opacity-60 uppercase block mb-2">Internal Notes</span>
<div class="bg-surface-container-low p-3 rounded-lg text-[13px] text-on-surface-variant italic">
Customer interested in bulk migration from Slack. Priority level: High.
</div>
</div>
</div>
<button class="mt-auto w-full py-2 border border-error text-error rounded-lg text-body-sm font-bold hover:bg-error-container/10 transition-colors">
Block Contact
</button>
</section>
</div>
</main>
</body></html>

BIN
stitch_bizone/conversations_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 510 KiB

462
stitch_bizone/dashboard_overview_wa_enterprise/code.html Normal file
View File

@ -0,0 +1,462 @@
<!DOCTYPE html><html class="light" lang="en" style=""><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&amp;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">
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sidebar-active {
font-variation-settings: 'FILL' 1;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error": "#ffffff",
"surface-container-low": "#f5f3f7",
"inverse-surface": "#303033",
"on-tertiary-container": "#b67558",
"surface-dim": "#dbd9dd",
"on-tertiary-fixed-variant": "#6d3920",
"surface-container-highest": "#e3e2e6",
"secondary-fixed": "#c6e7ff",
"error": "#ba1a1a",
"error-container": "#ffdad6",
"secondary": "#00658d",
"inverse-primary": "#b1c6f9",
"on-tertiary-fixed": "#360f00",
"on-primary-fixed-variant": "#314671",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"surface-container": "#efedf1",
"tertiary-fixed": "#ffdbcd",
"secondary-fixed-dim": "#82cfff",
"surface-tint": "#495e8a",
"background": "#faf8fd",
"primary-container": "#001b44",
"on-secondary-container": "#004866",
"tertiary": "#080100",
"surface-variant": "#e3e2e6",
"primary-fixed-dim": "#b1c6f9",
"on-secondary-fixed": "#001e2d",
"on-background": "#1b1b1f",
"on-secondary-fixed-variant": "#004c6b",
"on-surface-variant": "#44474f",
"tertiary-fixed-dim": "#ffb596",
"on-secondary": "#ffffff",
"surface-bright": "#faf8fd",
"tertiary-container": "#381000",
"primary": "#00020a",
"surface-container-high": "#e9e7ec",
"on-primary-container": "#7084b3",
"on-primary-fixed": "#001a42",
"primary-fixed": "#d8e2ff",
"secondary-container": "#2dbcfe",
"on-tertiary": "#ffffff",
"outline": "#75777f",
"inverse-on-surface": "#f2f0f4",
"outline-variant": "#c5c6d0",
"surface": "#faf8fd",
"on-primary": "#ffffff",
"on-surface": "#1b1b1f"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"xl": "40px",
"margin-page": "32px",
"xs": "4px",
"unit": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"gutter": "24px"
},
"fontFamily": {
"headline-md-mobile": ["Plus Jakarta Sans"],
"title-lg": ["Plus Jakarta Sans"],
"body-sm": ["Plus Jakarta Sans"],
"body-md": ["Plus Jakarta Sans"],
"label-md": ["Plus Jakarta Sans"],
"display-lg": ["Plus Jakarta Sans"],
"headline-md": ["Plus Jakarta Sans"]
},
"fontSize": {
"headline-md-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"title-lg": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}]
}
},
},
}
</script>
<style data-stitch-cursor=""></style><style data-stitch-scroll-lock=""></style></head>
<body class="bg-background text-on-surface font-body-md">
<!-- SideNavBar Shell -->
<aside class="fixed left-0 top-0 h-screen w-[280px] border-r border-outline-variant flex flex-col z-50 bg-primary-container">
<div class="px-lg bg-white flex items-center justify-start w-full h-[72px]" style="height: 72px; background-color: rgb(255, 255, 255);"><div class="flex items-center justify-start w-full h-full"><img src="{{DATA:IMAGE:IMAGE_9}}" alt="BizOne Logo" class="max-h-[40px] w-auto"></div></div>
<nav class="flex-1 space-y-xs px-md mt-lg mt-8">
<!-- Dashboard (Active) -->
<a class="flex items-center gap-md px-md py-sm border-l-4 border-secondary-container transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined sidebar-active" style="font-variation-settings: 'FILL' 1;">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<!-- All Chats -->
<a class="flex items-center gap-md px-md py-sm hover:bg-primary-container/50 hover:text-secondary-fixed transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md">All Chats</span>
</a>
<!-- Campaigns -->
<a class="flex items-center gap-md px-md py-sm hover:bg-primary-container/50 hover:text-secondary-fixed transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined">campaign</span>
<span class="font-body-md">Campaigns</span>
</a>
<!-- Contacts -->
<a class="flex items-center gap-md px-md py-sm hover:bg-primary-container/50 hover:text-secondary-fixed transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined">group</span>
<span class="font-body-md">Contacts</span>
</a>
<!-- Automation -->
<a class="flex items-center gap-md px-md py-sm hover:bg-primary-container/50 hover:text-secondary-fixed transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined">smart_toy</span>
<span class="font-body-md">Automation</span>
</a>
<!-- Settings -->
<a class="flex items-center gap-md px-md py-sm hover:bg-primary-container/50 hover:text-secondary-fixed transition-colors duration-200 text-white/70 bg-white/10 text-white" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto px-md pb-md">
<button class="w-full mb-lg py-sm px-md bg-secondary-container text-primary font-bold rounded-lg flex items-center justify-center gap-sm active:scale-95 duration-100">
<span class="material-symbols-outlined">add_circle</span>
New Broadcast
</button>
<div class="space-y-xs">
<a class="flex items-center gap-md px-md py-sm hover:text-secondary-fixed text-white/70" href="#">
<span class="material-symbols-outlined">help</span>
<span class="font-body-md">Help Center</span>
</a>
<a class="flex items-center gap-md px-md py-sm hover:text-secondary-fixed text-white/70" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-md">Logout</span>
</a>
</div>
</div>
</aside>
<!-- Main Canvas -->
<main class="ml-[280px] min-h-screen">
<!-- TopNavBar Shell -->
<header class="sticky top-0 w-full h-[72px] bg-surface-container-lowest border-b border-outline-variant flex items-center justify-between px-margin-page z-40">
<div class="flex items-center gap-lg">
<h2 class="font-headline-md text-headline-md font-extrabold text-primary">Admin Console</h2>
<div class="relative w-96 group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full bg-surface-container-low border-none rounded-lg pl-10 py-2 text-body-sm focus:ring-2 focus:ring-secondary-container transition-all" placeholder="Search conversations, campaigns..." type="text">
</div>
</div>
<div class="flex items-center gap-lg">
<div class="flex items-center gap-md">
<button class="p-2 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">history_edu</span>
</button>
<button class="p-2 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">grid_view</span>
</button>
</div>
<div class="h-8 w-[1px] bg-outline-variant"></div>
<div class="flex items-center gap-sm">
<div class="text-right">
<p class="font-body-sm font-bold text-on-surface">Alex Thompson</p>
<p class="text-[10px] uppercase tracking-wider text-on-surface-variant">Operations Lead</p>
</div>
<img alt="Administrator Avatar" class="h-10 w-10 rounded-full border-2 border-secondary-container object-cover" data-alt="Close-up portrait of a professional corporate administrator with a friendly and focused expression. The lighting is bright and clean with a minimalist office background, maintaining a high-productivity light-mode aesthetic with soft shadows and navy and white clothing." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKj34E59BZa5Bl8hDo6bnmr8PNDV1heVwA1loIXPJxcr3BAL4HLwlEHf9_lJ373DqqDdJdUHGb7-o7SEoDrXfEAp8ftnmFbA41DfOCgdNhuWdDALNaFhDeNQ68WdsOcbd1rTk_sZ6ph2p4x6qJgVRZAtFR4BfRA6yPtaCIZCaJ85ctMqy7ylVG0ex55W1Ynps-Iq3SFHwt-rZgqbKwivMWSpwR07nbHivus7OdYxXRqu64ucTd-uJveb4yK66dnxlO35kZ-5IOQF8">
</div>
</div>
</header>
<!-- Dashboard Content -->
<section class="p-margin-page space-y-gutter">
<!-- Bento KPI Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
<!-- KPI Card 1: Total Users -->
<div class="bg-surface-container-lowest p-lg rounded-xl border border-outline-variant flex flex-col justify-between">
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant font-label-md">Total Subscribers</p>
<h3 class="font-headline-md text-headline-md font-bold mt-xs">1.2M</h3>
</div>
<div class="bg-secondary-container/20 p-sm rounded-lg text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">group</span>
</div>
</div>
<div class="mt-lg flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="material-symbols-outlined text-[18px]">trending_up</span>
<span class="">12.5% vs last month</span>
</div>
</div>
<!-- KPI Card 2: Active Sessions -->
<div class="bg-surface-container-lowest p-lg rounded-xl border border-outline-variant flex flex-col justify-between">
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant font-label-md">Active Sessions</p>
<h3 class="font-headline-md text-headline-md font-bold mt-xs">42.8K</h3>
</div>
<div class="bg-secondary-container/20 p-sm rounded-lg text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bolt</span>
</div>
</div>
<div class="mt-lg flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="material-symbols-outlined text-[18px]">trending_up</span>
<span class="">8.2% vs last month</span>
</div>
</div>
<!-- KPI Card 3: Message Volume -->
<div class="bg-surface-container-lowest p-lg rounded-xl border border-outline-variant flex flex-col justify-between">
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant font-label-md">Daily Messages</p>
<h3 class="font-headline-md text-headline-md font-bold mt-xs">845K</h3>
</div>
<div class="bg-secondary-container/20 p-sm rounded-lg text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">forum</span>
</div>
</div>
<div class="mt-lg flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="material-symbols-outlined text-[18px]">trending_up</span>
<span class="">24.1% vs last month</span>
</div>
</div>
<!-- KPI Card 4: Response Time -->
<div class="bg-surface-container-lowest p-lg rounded-xl border border-outline-variant flex flex-col justify-between">
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant font-label-md">Avg Response Time</p>
<h3 class="font-headline-md text-headline-md font-bold mt-xs">1.8m</h3>
</div>
<div class="bg-secondary-container/20 p-sm rounded-lg text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">timer</span>
</div>
</div>
<div class="mt-lg flex items-center gap-xs text-error font-bold text-body-sm">
<span class="material-symbols-outlined text-[18px]">trending_down</span>
<span class="">-4.5% vs last month</span>
</div>
</div>
</div>
<!-- Main Data Visuals -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
<!-- Line Chart: Message Traffic -->
<div class="lg:col-span-2 bg-surface-container-lowest p-lg rounded-xl border border-outline-variant">
<div class="flex items-center justify-between mb-xl">
<div>
<h4 class="font-title-lg text-title-lg text-primary">Message Traffic Overview</h4>
<p class="text-on-surface-variant text-body-sm">Real-time volume analysis across all channels</p>
</div>
<select class="bg-surface-container-low border-none rounded-lg text-label-md font-bold focus:ring-secondary-container">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
</select>
</div>
<!-- Mockup Chart Area -->
<div class="h-64 flex items-end justify-between gap-md relative">
<!-- Horizontal Grid Lines -->
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-10">
<div class="w-full h-[1px] bg-on-surface"></div>
<div class="w-full h-[1px] bg-on-surface"></div>
<div class="w-full h-[1px] bg-on-surface"></div>
<div class="w-full h-[1px] bg-on-surface"></div>
</div>
<!-- Bars with Overlay Path Logic (Visual Representation) -->
<div class="flex-1 bg-surface-container-low h-[40%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">12k</div>
</div>
<div class="flex-1 bg-surface-container-low h-[65%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">18k</div>
</div>
<div class="flex-1 bg-secondary-container h-[90%] rounded-t-lg relative group">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-100">28k</div>
</div>
<div class="flex-1 bg-surface-container-low h-[55%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">15k</div>
</div>
<div class="flex-1 bg-surface-container-low h-[75%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">21k</div>
</div>
<div class="flex-1 bg-surface-container-low h-[45%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">13k</div>
</div>
<div class="flex-1 bg-surface-container-low h-[85%] rounded-t-lg relative group transition-all hover:bg-secondary-container">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-primary text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">24k</div>
</div>
</div>
<div class="flex justify-between mt-md px-2 text-[10px] font-bold text-on-surface-variant">
<span class="">MON</span><span class="">TUE</span><span class="">WED</span><span class="">THU</span><span class="">FRI</span><span class="">SAT</span><span class="">SUN</span>
</div>
</div>
<!-- Recent Campaigns Summary (Asymmetric Layout) -->
<div class="bg-primary text-secondary-fixed p-lg rounded-xl border border-primary-container relative overflow-hidden flex flex-col">
<div class="relative z-10">
<h4 class="font-title-lg text-title-lg mb-sm">Active Campaigns</h4>
<div class="space-y-lg mt-lg">
<div class="p-md rounded-lg bg-primary-container/40 border border-secondary-container/20">
<div class="flex justify-between items-center mb-sm">
<span class="font-bold text-body-sm">Black Friday Early Bird</span>
<span class="bg-secondary-container text-primary text-[10px] font-extrabold px-2 py-0.5 rounded-full uppercase">Running</span>
</div>
<div class="w-full bg-primary/50 h-2 rounded-full overflow-hidden">
<div class="bg-secondary-container h-full w-[72%]"></div>
</div>
<div class="flex justify-between mt-xs text-[10px] text-secondary-fixed-dim">
<span class="">72% of 500k Sent</span>
<span class="">3.4k Clicks</span>
</div>
</div>
<div class="p-md rounded-lg bg-primary-container/40 border border-secondary-container/20">
<div class="flex justify-between items-center mb-sm">
<span class="font-bold text-body-sm">Welcome Automation</span>
<span class="bg-secondary-container/40 text-secondary-fixed text-[10px] font-extrabold px-2 py-0.5 rounded-full uppercase">Evergreen</span>
</div>
<div class="w-full bg-primary/50 h-2 rounded-full overflow-hidden">
<div class="bg-secondary-container h-full w-[95%]"></div>
</div>
<div class="flex justify-between mt-xs text-[10px] text-secondary-fixed-dim">
<span class="">95% Delivery Rate</span>
<span class="">12.1k Success</span>
</div>
</div>
</div>
</div>
<button class="mt-auto w-full py-md text-center text-secondary-fixed-dim font-bold text-body-sm hover:text-secondary-fixed transition-colors">
View All Campaigns →
</button>
<!-- Abstract Background Elements -->
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-secondary-container/10 rounded-full blur-3xl"></div>
</div>
</div>
<!-- Recent Activity Table -->
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden">
<div class="p-lg border-b border-outline-variant flex items-center justify-between">
<h4 class="font-title-lg text-title-lg text-primary">Recent Activity Log</h4>
<button class="flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
Filter Table
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead class="bg-surface-container-low text-on-surface-variant font-label-md">
<tr>
<th class="px-lg py-md">Campaign Name</th>
<th class="px-lg py-md">Status</th>
<th class="px-lg py-md">Reach</th>
<th class="px-lg py-md">Conversion</th>
<th class="px-lg py-md">Date Created</th>
<th class="px-lg py-md">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-lg py-md font-bold text-primary">Q4 Product Launch</td>
<td class="px-lg py-md">
<span class="flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
Scheduled
</span>
</td>
<td class="px-lg py-md text-on-surface-variant">250,000 users</td>
<td class="px-lg py-md text-on-surface-variant">--</td>
<td class="px-lg py-md text-on-surface-variant">Oct 24, 2023</td>
<td class="px-lg py-md">
<button class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-highest transition-all">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-lg py-md font-bold text-primary">Flash Sale 24h</td>
<td class="px-lg py-md">
<span class="flex items-center gap-xs text-error font-bold text-body-sm">
<span class="w-2 h-2 rounded-full bg-error"></span>
Completed
</span>
</td>
<td class="px-lg py-md text-on-surface-variant">1,200,000 users</td>
<td class="px-lg py-md text-secondary font-bold">12.4%</td>
<td class="px-lg py-md text-on-surface-variant">Oct 22, 2023</td>
<td class="px-lg py-md">
<button class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-highest transition-all">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-lg py-md font-bold text-primary">Customer Satisfaction Survey</td>
<td class="px-lg py-md">
<span class="flex items-center gap-xs text-on-surface-variant font-bold text-body-sm">
<span class="w-2 h-2 rounded-full bg-outline"></span>
Draft
</span>
</td>
<td class="px-lg py-md text-on-surface-variant">45,000 users</td>
<td class="px-lg py-md text-on-surface-variant">--</td>
<td class="px-lg py-md text-on-surface-variant">Oct 21, 2023</td>
<td class="px-lg py-md">
<button class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-highest transition-all">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors cursor-pointer group">
<td class="px-lg py-md font-bold text-primary">Winter Rewards Program</td>
<td class="px-lg py-md">
<span class="flex items-center gap-xs text-secondary font-bold text-body-sm">
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
Active
</span>
</td>
<td class="px-lg py-md text-on-surface-variant">800,000 users</td>
<td class="px-lg py-md text-secondary font-bold">8.9%</td>
<td class="px-lg py-md text-on-surface-variant">Oct 19, 2023</td>
<td class="px-lg py-md">
<button class="p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-surface-container-highest transition-all">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-lg bg-surface-container-low flex items-center justify-between">
<p class="text-on-surface-variant text-body-sm">Showing 1-4 of 12 active campaigns</p>
<div class="flex gap-sm">
<button class="px-md py-1 bg-surface-container-highest rounded font-bold text-label-md">Previous</button>
<button class="px-md py-1 bg-primary text-white rounded font-bold text-label-md">Next</button>
</div>
</div>
</div>
</section>
</main>
<!-- Contextual FAB for Home Screen -->
<button class="fixed bottom-lg right-lg h-14 w-14 rounded-full bg-secondary-container text-primary flex items-center justify-center shadow-xl active:scale-95 transition-transform z-50">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
</button>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

438
stitch_bizone/dashboard_overview_whatsapp_business_admin/code.html
View File

@ -1,438 +0,0 @@
<!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&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": {
"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>

BIN
stitch_bizone/dashboard_overview_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 337 KiB

400
stitch_bizone/draft_editor_whatsapp_business_admin/code.html
View File

@ -1,400 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Draft Editor | WhatsApp Business 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;500;600;700;800&amp;family=Inter:wght@400;500;600;700&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"/>
<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": {
"surface-container-highest": "#dce5d8",
"secondary": "#006b5f",
"secondary-fixed": "#8ff4e3",
"on-primary-fixed": "#002109",
"on-primary-fixed-variant": "#005322",
"on-surface": "#151e16",
"on-tertiary-container": "#78351b",
"on-surface-variant": "#3c4a3d",
"surface-container-high": "#e2ebde",
"error-container": "#ffdad6",
"text-secondary": "#64748B",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#3de273",
"border-subtle": "#E2E8F0",
"tertiary-container": "#ffa07e",
"secondary-fixed-dim": "#72d8c8",
"on-tertiary": "#ffffff",
"status-success": "#25D366",
"outline-variant": "#bbcbb9",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-fixed": "#ffdbcf",
"background": "#f3fcef",
"surface-container": "#e7f1e4",
"on-secondary": "#ffffff",
"status-error": "#EF4444",
"tertiary": "#93492e",
"surface-card": "#FFFFFF",
"surface-variant": "#dce5d8",
"inverse-on-surface": "#eaf3e6",
"on-secondary-fixed": "#00201c",
"on-tertiary-fixed-variant": "#763319",
"on-tertiary-fixed": "#380d00",
"on-primary-container": "#005523",
"inverse-primary": "#3de273",
"surface": "#f3fcef",
"secondary-container": "#8cf1e1",
"background-main": "#F8F9FA",
"status-info": "#3B82F6",
"surface-tint": "#006d2f",
"status-warning": "#F59E0B",
"surface-bright": "#f3fcef",
"primary": "#006d2f",
"surface-container-low": "#edf6e9",
"on-error-container": "#93000a",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-dim": "#d3ddd0",
"on-secondary-fixed-variant": "#005047",
"on-secondary-container": "#006f64",
"outline": "#6c7b6b",
"inverse-surface": "#2a332a",
"primary-fixed": "#66ff8e",
"on-background": "#151e16",
"on-primary": "#ffffff",
"text-primary": "#1A1C1E",
"primary-container": "#25d366"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"base": "8px",
"card-padding": "20px",
"toolbar-height": "64px",
"container-margin": "32px",
"sidebar-width": "260px"
},
"fontFamily": {
"title-sm": ["Plus Jakarta Sans"],
"label-caps": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"mono-code": ["JetBrains Mono"]
},
"fontSize": {
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
body {
background-color: #f3fcef;
color: #151e16;
}
</style>
</head>
<body class="font-body-md text-body-md">
<!-- Top Navigation Bar -->
<nav class="fixed top-0 right-0 w-full md:w-[calc(100%-260px)] h-toolbar-height flex justify-between items-center px-gutter bg-surface-container-lowest shadow-sm z-30">
<div class="flex items-center gap-4">
<button class="md:hidden p-2 text-on-surface-variant">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="font-title-sm text-title-sm text-primary">Admin Dashboard</h1>
<div class="hidden md:flex items-center ml-8 gap-4 text-on-surface-variant">
<span class="font-title-sm text-title-sm text-primary border-b-2 border-primary">English</span>
<span class="hover:text-primary transition-all cursor-pointer">Bahasa</span>
</div>
</div>
<div class="flex items-center gap-6">
<div class="hidden md:flex items-center bg-surface-container-low px-4 py-2 rounded-full border border-outline-variant">
<span class="material-symbols-outlined text-on-surface-variant mr-2">search</span>
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48" placeholder="Search" type="text"/>
</div>
<div class="flex items-center gap-3">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-outline-variant bg-surface-container-high">
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8ET3VGYWFithF2xu9ongG6vEfwwSbI3CkeNXfD-eyJUHMddiUT2y4v8CIZ9hKqn4ZWVySWI3zKG7jxwbes6qynB5jpAmZx0y1NgfHMNZFPto55g07VYYkgZ7D1T3tsxLDiwAc7QbiGynRMHshD0PGO3lW496vyozyqhBcs-RcKd_nPu9IRR93lZdK2JbRpOHF2-wgfYga6tKxK-0Igwzuap6pqWSwmt3CtMlJ8NamKnojO261ujh-hAOce4cFG_aKCHx9dM8nNd8"/>
</div>
</div>
</div>
</nav>
<!-- Side Navigation Bar -->
<aside class="hidden md:flex fixed left-0 top-0 h-full w-[260px] flex-col py-6 px-4 bg-surface-container-lowest shadow-sm z-40">
<div class="mb-10 px-2">
<span class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</span>
<p class="text-on-surface-variant text-body-sm opacity-70">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 text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">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 text-primary font-bold bg-surface-container-low" href="#">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">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 text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">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 text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">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 text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">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 text-on-surface-variant hover:bg-surface-container-low" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto space-y-1 border-t border-outline-variant pt-6">
<button class="w-full mb-4 bg-primary text-on-primary py-3 rounded-xl font-title-sm flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add_circle</span>
New Broadcast
</button>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
<span>Help Center</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">logout</span>
<span>Logout</span>
</a>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="pt-toolbar-height md:ml-[260px] min-h-screen p-gutter">
<div class="max-w-7xl mx-auto">
<!-- Header Section -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<div>
<nav class="flex items-center gap-2 text-on-surface-variant text-body-sm mb-2">
<span>Drafts</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-primary font-medium">Edit Draft</span>
</nav>
<h2 class="font-display-lg text-display-lg text-on-surface">Message Draft Editor</h2>
</div>
<div class="flex gap-3">
<button class="px-6 py-2.5 rounded-lg border border-outline text-on-surface font-title-sm hover:bg-surface-container transition-colors">
Save Draft
</button>
<button class="px-6 py-2.5 rounded-lg bg-primary text-on-primary font-title-sm hover:opacity-90 transition-opacity flex items-center gap-2">
<span class="material-symbols-outlined">send</span>
Schedule/Send
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Editor Side -->
<div class="lg:col-span-8 space-y-6">
<!-- Config Card -->
<div class="bg-surface-card rounded-xl p-card-padding shadow-sm border border-outline-variant">
<h3 class="font-title-sm text-title-sm mb-6 text-on-surface">Recipient &amp; Template</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Select Recipient</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">person_search</span>
<input class="w-full pl-10 pr-4 py-3 bg-surface-container-lowest border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all outline-none" type="text" value="Sarah Jenkins (+1 234 567 890)"/>
</div>
</div>
<div>
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Message Template</label>
<div class="relative">
<select class="w-full pl-4 pr-10 py-3 bg-surface-container-lowest border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all outline-none appearance-none">
<option>Customer Welcome (Active)</option>
<option>Order Confirmation</option>
<option>Appointment Reminder</option>
<option>None (Custom Message)</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none">expand_more</span>
</div>
</div>
</div>
</div>
<!-- Editor Canvas -->
<div class="bg-surface-card rounded-xl shadow-sm border border-outline-variant flex flex-col min-h-[400px]">
<div class="flex items-center justify-between px-card-padding py-3 border-b border-outline-variant bg-surface-container-low">
<div class="flex gap-4">
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Bold">
<span class="material-symbols-outlined">format_bold</span>
</button>
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Italic">
<span class="material-symbols-outlined">format_italic</span>
</button>
<button class="p-2 hover:bg-surface-container-high rounded transition-colors text-on-surface-variant" title="Variable">
<span class="material-symbols-outlined">data_object</span>
</button>
</div>
<div class="text-body-sm text-on-surface-variant italic">
Last saved 2 mins ago
</div>
</div>
<div class="p-card-padding flex-1">
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-2 block">Message Body</label>
<textarea class="w-full h-full min-h-[280px] bg-transparent border-none focus:ring-0 font-body-md resize-none p-0" placeholder="Type your message here...">Hello {{1}}, thank you for choosing our services!
We've received your inquiry regarding {{2}}. Our team will get back to you within 24 hours.
Best regards,
WhatsApp Admin Team</textarea>
</div>
<div class="px-card-padding py-3 bg-surface-container-low border-t border-outline-variant flex gap-2">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-primary-container text-on-primary-container">
<span class="material-symbols-outlined text-[14px] mr-1">check_circle</span>
Syntax Valid
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-surface-container-highest text-on-surface-variant">
{{1}} : Recipient Name
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-surface-container-highest text-on-surface-variant">
{{2}} : Ticket Topic
</span>
</div>
</div>
</div>
<!-- Preview Side (Mobile Mockup) -->
<div class="lg:col-span-4 flex justify-center">
<div class="sticky top-[100px] w-full max-w-[320px]">
<h3 class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-4 text-center">Real-time Preview</h3>
<!-- Mobile Shell -->
<div class="relative border-[10px] border-on-surface rounded-[40px] overflow-hidden bg-[#e5ddd5] aspect-[9/18.5] shadow-2xl">
<!-- Mobile Header -->
<div class="bg-[#075e54] text-white p-4 pt-10 flex items-center gap-2">
<span class="material-symbols-outlined">arrow_back</span>
<div class="w-8 h-8 rounded-full bg-surface-variant/30 flex items-center justify-center">
<span class="material-symbols-outlined text-sm">business</span>
</div>
<div class="flex-1">
<p class="text-[14px] font-bold leading-tight">Your Brand</p>
<p class="text-[10px] opacity-70">Official Business Account</p>
</div>
</div>
<!-- Chat Area -->
<div class="p-3 space-y-4">
<!-- Message Bubble -->
<div class="flex flex-col items-end">
<div class="bg-[#dcf8c6] rounded-lg rounded-tr-none p-3 shadow-sm max-w-[90%] relative">
<p class="text-[14px] text-gray-800">Hello <span class="text-blue-600 font-medium">Sarah Jenkins</span>, thank you for choosing our services! </p>
<p class="text-[14px] text-gray-800 mt-2">We've received your inquiry regarding <span class="text-blue-600 font-medium">Premium Support Plan</span>. Our team will get back to you within 24 hours.</p>
<p class="text-[14px] text-gray-800 mt-2">Best regards,<br/>WhatsApp Admin Team</p>
<div class="flex items-center justify-end gap-1 mt-1">
<span class="text-[10px] text-gray-500">10:45 AM</span>
<span class="material-symbols-outlined text-[14px] text-[#4fc3f7]" style="font-variation-settings: 'FILL' 1;">done_all</span>
</div>
</div>
</div>
</div>
<!-- Mobile Footer Input (Mock) -->
<div class="absolute bottom-0 left-0 w-full p-2 flex items-center gap-2">
<div class="flex-1 bg-white rounded-full h-10 flex items-center px-4 gap-2 shadow-sm">
<span class="material-symbols-outlined text-gray-400">sentiment_satisfied</span>
<div class="w-full h-4 bg-gray-100 rounded-sm"></div>
<span class="material-symbols-outlined text-gray-400 rotate-45">attach_file</span>
</div>
<div class="w-10 h-10 rounded-full bg-[#128c7e] flex items-center justify-center text-white shadow-sm">
<span class="material-symbols-outlined">mic</span>
</div>
</div>
</div>
<!-- Tip Card -->
<div class="mt-8 bg-tertiary-fixed rounded-xl p-4 border border-tertiary-fixed-dim">
<div class="flex gap-3">
<span class="material-symbols-outlined text-tertiary">lightbulb</span>
<div>
<p class="text-on-tertiary-fixed font-bold text-body-sm">Pro Tip</p>
<p class="text-on-tertiary-fixed-variant text-[13px]">Using variables like {{1}} ensures personalized delivery which can increase engagement by up to 40%.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Stats / Quick Info -->
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Estimated Cost</p>
<p class="text-title-sm text-on-surface">$0.0084 <span class="text-body-sm font-normal text-secondary">(Standard Rate)</span></p>
</div>
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Estimated Reach</p>
<p class="text-title-sm text-on-surface">1 Recipient</p>
</div>
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Message Status</p>
<span class="inline-flex items-center text-status-warning font-bold">
<span class="w-2 h-2 rounded-full bg-status-warning mr-2"></span>
Drafting
</span>
</div>
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant shadow-sm">
<p class="text-label-caps text-on-surface-variant uppercase mb-1">Character Count</p>
<p class="text-title-sm text-on-surface">184 / 4096</p>
</div>
</div>
</div>
</main>
<!-- Mobile Bottom Navigation (Hidden on desktop) -->
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-container-lowest border-t border-outline-variant flex justify-around items-center py-2 px-gutter z-50">
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span class="text-[10px]">Home</span>
</a>
<a class="flex flex-col items-center gap-1 text-primary" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">description</span>
<span class="text-[10px] font-bold">Editor</span>
</a>
<div class="relative -top-4">
<button class="w-12 h-12 rounded-full bg-primary text-on-primary shadow-lg flex items-center justify-center">
<span class="material-symbols-outlined">send</span>
</button>
</div>
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="text-[10px]">Chats</span>
</a>
<a class="flex flex-col items-center gap-1 text-on-surface-variant" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="text-[10px]">Settings</span>
</a>
</nav>
</body></html>

BIN
stitch_bizone/draft_editor_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 324 KiB

BIN
stitch_bizone/login_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 114 KiB

512
stitch_bizone/messages_drafts_whatsapp_business_admin/code.html
View File

@ -1,512 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WhatsApp Business Admin Console - Message List</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": ["jetbrainsMono"]
},
"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;
}
</style>
</head>
<body class="text-on-surface antialiased">
<!-- SideNavBar Anchor -->
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm dark:shadow-none flex flex-col py-6 px-4 z-50">
<div class="mb-8">
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim">WhatsApp Business</h1>
<p class="text-on-surface-variant font-body-sm text-body-sm opacity-70">Admin Console</p>
</div>
<button class="mb-8 flex items-center justify-center gap-2 bg-primary text-on-primary py-3 px-4 rounded-xl font-title-sm text-title-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-low dark:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="chat" style="font-variation-settings: 'FILL' 1;">chat</span>
Conversations
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
Contacts
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
Templates
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
Webhooks
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
Analytics
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors text-on-surface-variant dark:text-surface-variant" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
Settings
</a>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant/30 space-y-1">
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
Help Center
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg font-body-md text-body-md text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
Logout
</a>
</div>
</aside>
<!-- TopNavBar Anchor -->
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex justify-between items-center px-gutter z-40">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant/60">search</span>
<input class="w-full bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 font-body-sm text-body-sm focus:ring-2 focus:ring-primary/20" placeholder="Search messages, recipients..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-3">
<span class="text-on-surface-variant font-title-sm text-title-sm border-b-2 border-primary">English</span>
<span class="text-on-surface-variant/40 font-title-sm text-title-sm">Bahasa</span>
</div>
<div class="flex items-center gap-4">
<button class="relative p-2 text-on-surface-variant hover:text-primary transition-all">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-1 right-1 w-2 h-2 bg-status-error rounded-full"></span>
</button>
<button class="p-2 text-on-surface-variant hover:text-primary transition-all">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
<div class="flex items-center gap-3 ml-2 border-l border-outline-variant/30 pl-4">
<div class="text-right">
<p class="font-title-sm text-title-sm leading-tight">Admin User</p>
<p class="font-label-caps text-label-caps text-on-surface-variant">Super Admin</p>
</div>
<img alt="Admin Profile Image" class="w-10 h-10 rounded-full object-cover border-2 border-primary/10" data-alt="A professional studio portrait of a corporate executive with a friendly expression. The lighting is soft and high-key, creating a bright and approachable aesthetic. The background is a clean, neutral gray that emphasizes the professional tone of the enterprise SaaS dashboard. The colors are natural and balanced to match the modern UI layout." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeWtPSu0Jobu5IFGriPhlqfuBowBhUFILmaYhAR-B7PLsxKZ4rFDUhwj7ILS40cHUhXqDa9Mnz9rYhAOfTD0Ba_R5fHuQOuUZVfmUyeClsXfH5AWTMYs-xIE8Gb1NqrviMPHCGdHG1hv6qPzMRV5aBC-AsriRCNmnmEvlN5Q2u5E6haVHmO8zoSureMm_Yo1UCauTnpZg5gDNQJ4a2oBv8-MCi9LgoSJisdD5HI6ixtGZNVq19sr0qPsA9voryuf_LHntOt6hPeGk"/>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="ml-[260px] pt-[64px] min-h-screen">
<div class="p-container-margin">
<!-- Header Section -->
<div class="flex justify-between items-end mb-8">
<div>
<h2 class="font-display-lg text-display-lg text-on-surface mb-2">Message Management</h2>
<p class="text-on-surface-variant font-body-md text-body-md">Monitor, track, and manage your WhatsApp business communications.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
<span class="material-symbols-outlined">filter_list</span>
Filters
</button>
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg font-title-sm text-title-sm hover:bg-surface-variant transition-colors">
<span class="material-symbols-outlined">download</span>
Export
</button>
</div>
</div>
<!-- Stats Overview - Bento Grid style -->
<div class="grid grid-cols-12 gap-6 mb-8">
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-primary/10 rounded-lg text-primary">
<span class="material-symbols-outlined">send</span>
</div>
<span class="text-status-success font-label-caps text-label-caps bg-status-success/10 px-2 py-1 rounded">+12% vs last week</span>
</div>
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Total Sent</p>
<h3 class="font-display-lg text-display-lg">24,592</h3>
</div>
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-status-info/10 rounded-lg text-status-info">
<span class="material-symbols-outlined">schedule</span>
</div>
<span class="text-on-surface-variant font-label-caps text-label-caps bg-surface-container-low px-2 py-1 rounded">Next 24h</span>
</div>
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Scheduled</p>
<h3 class="font-display-lg text-display-lg">1,208</h3>
</div>
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-status-warning/10 rounded-lg text-status-warning">
<span class="material-symbols-outlined">edit_note</span>
</div>
<span class="text-on-surface-variant font-label-caps text-label-caps bg-surface-container-low px-2 py-1 rounded">Action required</span>
</div>
<p class="text-on-surface-variant font-label-caps text-label-caps uppercase tracking-wider mb-1">Drafts</p>
<h3 class="font-display-lg text-display-lg">45</h3>
</div>
</div>
<!-- Messages Table Container -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
<div class="px-6 py-5 border-b border-outline-variant/30 flex items-center justify-between">
<div class="flex gap-6">
<button class="font-title-sm text-title-sm text-primary border-b-2 border-primary pb-5 -mb-[21px]">All Messages</button>
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Sent</button>
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Scheduled</button>
<button class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-colors pb-5 -mb-[21px]">Drafts</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Recipient</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Message Preview</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Status</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Timestamp</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/30">
<!-- Sent Message -->
<tr class="hover:bg-surface-container-low/30 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">JS</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-semibold">John Smith</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 812-3456-7890</p>
</div>
</div>
</td>
<td class="px-6 py-4 max-w-xs">
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Hello John! Just checking in on your recent order #8812. Let us know if you have any questions.</p>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-success/10 text-status-success font-label-caps text-label-caps">
<span class="w-1.5 h-1.5 rounded-full bg-status-success"></span>
Sent
</span>
</td>
<td class="px-6 py-4">
<p class="font-body-sm text-body-sm text-on-surface">Oct 24, 2023</p>
<p class="font-label-caps text-label-caps text-on-surface-variant">10:45 AM</p>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
<!-- Scheduled Message -->
<tr class="hover:bg-surface-container-low/30 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-status-info/10 flex items-center justify-center text-status-info font-bold text-sm">AM</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-semibold">Alice Miller</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 819-0012-3344</p>
</div>
</div>
</td>
<td class="px-6 py-4 max-w-xs">
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Reminder: Your appointment is scheduled for tomorrow at 2:00 PM. Reply 1 to confirm.</p>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-info/10 text-status-info font-label-caps text-label-caps">
<span class="w-1.5 h-1.5 rounded-full bg-status-info"></span>
Scheduled
</span>
</td>
<td class="px-6 py-4">
<p class="font-body-sm text-body-sm text-on-surface">Oct 26, 2023</p>
<p class="font-label-caps text-label-caps text-on-surface-variant">09:00 AM</p>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">edit</span>
</button>
</td>
</tr>
<!-- Draft Message -->
<tr class="hover:bg-surface-container-low/30 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-status-warning/10 flex items-center justify-center text-status-warning font-bold text-sm">RK</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-semibold">Robert King</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 857-7788-9900</p>
</div>
</div>
</td>
<td class="px-6 py-4 max-w-xs">
<p class="font-body-sm text-body-sm text-on-surface italic line-clamp-1">[No message content yet]</p>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-warning/10 text-status-warning font-label-caps text-label-caps">
<span class="w-1.5 h-1.5 rounded-full bg-status-warning"></span>
Draft
</span>
</td>
<td class="px-6 py-4">
<p class="font-body-sm text-body-sm text-on-surface">Oct 23, 2023</p>
<p class="font-label-caps text-label-caps text-on-surface-variant">04:12 PM</p>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">edit</span>
</button>
</td>
</tr>
<!-- Another Sent Message -->
<tr class="hover:bg-surface-container-low/30 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">EW</div>
<div>
<p class="font-body-md text-body-md text-on-surface font-semibold">Elena White</p>
<p class="font-body-sm text-body-sm text-on-surface-variant">+62 811-2222-3333</p>
</div>
</div>
</td>
<td class="px-6 py-4 max-w-xs">
<p class="font-body-sm text-body-sm text-on-surface line-clamp-1">Thank you for your feedback! Your 20% discount code is WELCOME20. Enjoy!</p>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-status-success/10 text-status-success font-label-caps text-label-caps">
<span class="w-1.5 h-1.5 rounded-full bg-status-success"></span>
Sent
</span>
</td>
<td class="px-6 py-4">
<p class="font-body-sm text-body-sm text-on-surface">Oct 22, 2023</p>
<p class="font-label-caps text-label-caps text-on-surface-variant">01:30 PM</p>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 bg-surface-container-low/20 border-t border-outline-variant/30 flex items-center justify-between">
<p class="font-body-sm text-body-sm text-on-surface-variant">Showing 1 to 10 of 2,492 messages</p>
<div class="flex gap-2">
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-sm">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary font-label-caps text-label-caps">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors font-label-caps text-label-caps">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors font-label-caps text-label-caps">3</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-sm">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Contextual Draft Builder Preview -->
<div class="mt-12 grid grid-cols-12 gap-8 items-start">
<div class="col-span-12 lg:col-span-7">
<div class="bg-surface-container-lowest p-8 rounded-2xl shadow-sm border border-outline-variant/10">
<h4 class="font-headline-md text-headline-md mb-6">Quick Draft</h4>
<div class="space-y-4">
<div>
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Select Template</label>
<select class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary">
<option>Welcome Message</option>
<option>Appointment Reminder</option>
<option>Order Confirmation</option>
<option>Custom Message</option>
</select>
</div>
<div>
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Recipient</label>
<input class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary" placeholder="Search contacts..." type="text"/>
</div>
<div>
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-2 uppercase tracking-wide">Message Body</label>
<textarea class="w-full bg-surface-container-low border-outline-variant/30 rounded-lg p-3 font-body-md text-body-md focus:ring-primary focus:border-primary" placeholder="Type your message here..." rows="4"></textarea>
</div>
<div class="flex justify-between items-center pt-4">
<div class="flex gap-4">
<button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">image</span>
<span class="font-body-sm text-body-sm">Media</span>
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">insert_emoticon</span>
<span class="font-body-sm text-body-sm">Emoji</span>
</button>
</div>
<div class="flex gap-3">
<button class="px-6 py-2 rounded-lg font-title-sm text-title-sm border border-outline hover:bg-surface-container-low transition-colors">Save as Draft</button>
<button class="px-6 py-2 rounded-lg font-title-sm text-title-sm bg-primary text-on-primary hover:opacity-90 transition-opacity">Schedule Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- WhatsApp UI Preview -->
<div class="col-span-12 lg:col-span-5">
<div class="relative w-[320px] mx-auto bg-black rounded-[48px] p-3 shadow-2xl overflow-hidden aspect-[9/19]">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-3xl z-20"></div>
<div class="h-full bg-[#E5DDD5] rounded-[36px] overflow-hidden flex flex-col relative">
<!-- Mobile Header -->
<div class="bg-[#075E54] p-4 pt-10 text-white flex items-center gap-3">
<span class="material-symbols-outlined">arrow_back</span>
<div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
<img alt="Recipient Avatar" data-alt="A detailed close-up portrait of a professional woman with a warm, authentic smile. The image is styled as a mobile profile picture for a messaging app, featuring soft outdoor natural lighting and a slightly blurred botanical background. The color palette is vibrant yet natural, emphasizing clarity and trustworthiness in a commercial SaaS context." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVkXmdAPfcX_RCfec81RmYxdp1m2xA6PaL-RT-o8K0PPccahZBw6s0hwiL6_eYDcnptbgqB5KvdBel9zy4NBKW_MgLhXFc3rnlZ2cZeniyUMLmjeniWaL1Qsqe92Z6C66AnArtCYCQ2qxW-t96SDlrCmuBYx2I4-Tx6SB6O9Wnup4_dZMWNEOssbsXAiWoejleV5QpfsFFejDMMDY5BXWmoNJQhCy_AMOPdlcnD9h0g62xaRe1gdmjihAgAEzcEmpc_DSN7pFTgIM"/>
</div>
<div class="flex-1">
<p class="font-bold text-sm leading-tight">Customer Service</p>
<p class="text-[10px] opacity-80">online</p>
</div>
<div class="flex gap-3">
<span class="material-symbols-outlined text-sm">videocam</span>
<span class="material-symbols-outlined text-sm">call</span>
<span class="material-symbols-outlined text-sm">more_vert</span>
</div>
</div>
<!-- Chat Area -->
<div class="flex-1 p-3 space-y-4 overflow-y-auto" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDpAAjjA68yKUGoQ8hOna92c1J5Hq-QNb628ey7npsgPh_qrE4iVm09YF2_yezJ-noQAtAqwZFwjZZ7_O8m6NckDs9tPk60pughqUJrRMSzH6P5Q_IHA31S8b2aCzmPphQ7mMCf0YMtYsNUvYa1HTfqVJ8aZYgK2xlJ-wKMXNwfcHbP5NGi9X1YgdMu8PiYenNHuVjogbciru4HAzInAQ5maDvSbj2FVXISE9g4iF3vAS_sYmQE6EHdwLo2BrC7hFBPgslr_P2k35I'); background-repeat: repeat; background-size: contain;">
<div class="bg-white p-2 rounded-lg rounded-tl-none max-w-[80%] shadow-sm text-xs relative">
Hello! How can I help you today?
<span class="block text-[8px] text-gray-500 text-right mt-1">10:42 AM</span>
</div>
<div class="bg-[#DCF8C6] p-2 rounded-lg rounded-tr-none max-w-[80%] ml-auto shadow-sm text-xs relative">
<p class="mb-1">Just checking in on your recent order #8812. Let us know if you have any questions.</p>
<div class="flex items-center justify-end gap-1 mt-1">
<span class="text-[8px] text-gray-500">10:45 AM</span>
<span class="material-symbols-outlined text-[10px] text-blue-400" style="font-variation-settings: 'FILL' 1;">done_all</span>
</div>
</div>
</div>
<!-- Input Bar -->
<div class="p-2 flex gap-2 items-center">
<div class="flex-1 bg-white rounded-full flex items-center px-3 py-2 shadow-sm">
<span class="material-symbols-outlined text-gray-400 text-xl">insert_emoticon</span>
<span class="flex-1 text-gray-300 text-[10px] ml-2">Type a message</span>
<span class="material-symbols-outlined text-gray-400 text-xl rotate-45">attach_file</span>
<span class="material-symbols-outlined text-gray-400 text-xl ml-2">photo_camera</span>
</div>
<div class="w-10 h-10 bg-[#075E54] rounded-full flex items-center justify-center text-white">
<span class="material-symbols-outlined text-xl">mic</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>

BIN
stitch_bizone/messages_drafts_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 382 KiB

481
stitch_bizone/roles_permissions_whatsapp_business_admin/code.html
View File

@ -1,481 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Roles &amp; Permissions | WhatsApp Business 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&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": ["jetbrainsMono"]
},
"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>
body {
background-color: #f3fcef;
font-family: 'Inter', sans-serif;
color: #151e16;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #dce5d8; border-radius: 10px; }
.permission-toggle:checked + .toggle-bg { background-color: #25d366; }
.permission-toggle:checked + .toggle-bg .toggle-dot { transform: translateX(100%); }
</style>
</head>
<body class="overflow-hidden">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest dark:bg-surface-container-low 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 dark:text-primary-fixed-dim">WhatsApp Business</h1>
<p class="text-on-surface-variant dark:text-surface-variant font-body-sm text-body-sm">Admin Console</p>
</div>
<button class="mb-6 w-full flex items-center justify-center gap-2 bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-title-sm text-title-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-1 flex flex-col gap-1 custom-scrollbar overflow-y-auto">
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">chat</span>
Conversations
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">contacts</span>
Contacts
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">description</span>
Templates
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">webhook</span>
Webhooks
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">monitoring</span>
Analytics
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-low dark:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
Settings
</a>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant flex flex-col gap-1">
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">help</span>
Help Center
</a>
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
<span class="material-symbols-outlined">logout</span>
Logout
</a>
</div>
</aside>
<!-- Main Content Area -->
<div class="ml-[260px] min-h-screen flex flex-col">
<!-- TopNavBar -->
<header class="h-[64px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex justify-between items-center px-gutter z-40">
<div class="flex items-center gap-6">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="pl-10 pr-4 py-1.5 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary w-64 text-body-sm font-body-sm" placeholder="Search..." type="text"/>
</div>
<div class="flex gap-4 font-title-sm text-title-sm">
<a class="text-primary font-bold border-b-2 border-primary" href="#">English</a>
<a class="text-on-surface-variant hover:text-primary transition-all" href="#">Bahasa</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex gap-2">
<button class="p-2 rounded-full hover:bg-surface-container text-on-surface-variant opacity-90 hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-container text-on-surface-variant opacity-90 hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined">settings</span>
</button>
</div>
<div class="h-8 w-px bg-outline-variant mx-1"></div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="font-title-sm text-[14px] leading-tight font-bold text-primary">Admin User</p>
<p class="text-on-surface-variant text-[12px]">Global Admin</p>
</div>
<img alt="Admin Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-primary-container" data-alt="A professional close-up portrait of a business administrator in a modern office setting. The lighting is soft and corporate, utilizing a bright high-key aesthetic with clean white backgrounds. The individual looks confident and professional, perfectly fitting the high-end SaaS enterprise identity of the dashboard." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaJS2OKrXWTy1XzOoMOfXrdLBIAP8f07UWKk8SrvBZl-XDCg0M9DvIxhv9t943CFtm9pwartTHJfa-AeR8Z2u2KqcnNbzTFpR9roPmrkOvZAFiTAewSMgvD-jA8cgsflEIi_dVkja8Ga-r5k3QFI5Mytf91IkCEQGhAjg4z6F4G1BdET2uX29j0ByJwog-qGCrMVWf1WYs19JUJ1vp83rONSVYdfucJuwbQpxdezjnInDT7w84eZzvEMx6Z19It3U7iIPH4pKhHwU"/>
</div>
</div>
</header>
<!-- Canvas -->
<main class="flex-1 overflow-y-auto p-gutter bg-background-main">
<div class="max-w-6xl mx-auto">
<!-- Page Header -->
<div class="mb-8 flex justify-between items-end">
<div>
<h2 class="font-display-lg text-display-lg text-primary mb-1">Roles &amp; Permissions</h2>
<p class="text-on-surface-variant font-body-md">Configure access levels and granular permissions for your team members.</p>
</div>
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-xl font-title-sm hover:opacity-95 transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">add_moderator</span>
Create New Role
</button>
</div>
<!-- Bento Grid Layout for Roles -->
<div class="grid grid-cols-12 gap-6 mb-8">
<!-- Admin Role Card -->
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-primary-container/20 rounded-lg">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">shield_person</span>
</div>
<span class="px-3 py-1 bg-primary text-on-primary text-label-caps rounded-full">Active</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Admin</h3>
<p class="text-on-surface-variant text-body-sm mb-4">Full access to all modules, including system settings and billing.</p>
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
2 users assigned
</div>
</div>
<!-- Editor Role Card -->
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-secondary-container/20 rounded-lg">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">edit_document</span>
</div>
<span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-label-caps rounded-full">Standard</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Editor</h3>
<p class="text-on-surface-variant text-body-sm mb-4">Can create templates and manage campaigns, but cannot change settings.</p>
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
5 users assigned
</div>
</div>
<!-- Agent Role Card -->
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow ring-2 ring-primary ring-offset-2">
<div class="flex items-center justify-between mb-4">
<div class="p-3 bg-tertiary-container/20 rounded-lg">
<span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">support_agent</span>
</div>
<span class="px-3 py-1 bg-primary-container text-on-primary-container text-label-caps rounded-full">Editing Now</span>
</div>
<h3 class="font-headline-md text-[20px] mb-1">Agent</h3>
<p class="text-on-surface-variant text-body-sm mb-4">Limited access to view analytics and respond to customer conversations.</p>
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]">group</span>
14 users assigned
</div>
</div>
</div>
<!-- Permission Matrix -->
<div class="bg-surface-card rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="p-6 border-b border-outline-variant flex justify-between items-center">
<h3 class="font-title-sm text-title-sm">Permission Matrix: <span class="text-primary">Agent</span></h3>
<div class="flex gap-2">
<button class="px-4 py-2 border border-outline rounded-lg text-body-sm hover:bg-surface-container transition-colors">Discard</button>
<button class="px-6 py-2 bg-primary text-on-primary rounded-lg text-body-sm font-bold hover:opacity-90 transition-opacity">Save Changes</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-surface-container-low">
<th class="py-4 px-6 text-label-caps text-on-surface-variant uppercase tracking-wider">Module / Permission</th>
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">View</th>
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Create/Edit</th>
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Delete</th>
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Manage All</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<!-- Group 1: Campaigns -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-on-surface-variant">campaign</span>
<span class="font-title-sm text-[15px]">Manage Campaigns</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
</tr>
<!-- Group 2: Analytics -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-on-surface-variant">monitoring</span>
<span class="font-title-sm text-[15px]">View Analytics</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
</tr>
<!-- Group 3: Settings -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
<span class="font-title-sm text-[15px]">Edit Settings</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
</tr>
<!-- Group 4: Billing -->
<tr>
<td class="py-4 px-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-on-surface-variant">payments</span>
<span class="font-title-sm text-[15px]">Billing &amp; Invoices</span>
</div>
</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">—</td>
<td class="py-4 px-6 text-center">
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only permission-toggle" type="checkbox"/>
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
</div>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Webhook Logs Preview (Bottom Section) -->
<div class="mt-8 grid grid-cols-12 gap-6">
<div class="col-span-12 lg:col-span-8 bg-surface-card p-6 rounded-xl shadow-sm border border-outline-variant">
<div class="flex items-center justify-between mb-6">
<h3 class="font-title-sm text-title-sm">Audit Log: Recent Changes</h3>
<a class="text-primary text-body-sm font-bold hover:underline" href="#">View All</a>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b border-outline-variant last:border-0">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
<span class="material-symbols-outlined text-primary">person_edit</span>
</div>
<div>
<p class="text-body-md font-semibold">Admin updated 'Agent' permissions</p>
<p class="text-body-sm text-on-surface-variant">Changed 'View Analytics' from OFF to ON</p>
</div>
</div>
<span class="text-label-caps text-on-surface-variant">2 mins ago</span>
</div>
<div class="flex items-center justify-between py-3 border-b border-outline-variant last:border-0">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
<span class="material-symbols-outlined text-primary">add_circle</span>
</div>
<div>
<p class="text-body-md font-semibold">Created new role: 'Reporting Only'</p>
<p class="text-body-sm text-on-surface-variant">Assigned to 0 users</p>
</div>
</div>
<span class="text-label-caps text-on-surface-variant">4 hours ago</span>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4 bg-primary text-on-primary p-6 rounded-xl shadow-lg relative overflow-hidden group">
<div class="relative z-10">
<h3 class="font-headline-md text-[20px] mb-2">Need help?</h3>
<p class="opacity-90 text-body-sm mb-6">Learn more about how to set up granular access for high-security enterprise environments.</p>
<button class="bg-white text-primary px-5 py-2 rounded-lg font-bold text-body-sm hover:bg-surface-container transition-colors">Documentation</button>
</div>
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-[120px] opacity-10 group-hover:scale-110 transition-transform">lock_person</span>
</div>
</div>
</div>
</main>
</div>
</body></html>

BIN
stitch_bizone/roles_permissions_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 302 KiB

509
stitch_bizone/system_logs_queue_whatsapp_business_admin/code.html
View File

@ -1,509 +0,0 @@
<!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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 400 KiB

405
stitch_bizone/template_builder_whatsapp_business_admin/code.html
View File

@ -1,405 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>WhatsApp Business - Template Builder</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": {
"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
}
.whatsapp-bg {
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuA_4iXN6hTTAgjTGUZiXEy7wJeuVZG95iDdr5xfEDfHV5z1otBTKswDFhtXlfznXAEIgJ87OKNhGezxVRm5zyO4RDMryqKSSzhDGhZrXfTbGrroaFMAnwfFXmkgFCyjfaSlYdE-r5UO6vYiokiCmta6QPb-7fB2nw3k0-54lVffTfUcbmKvMQXwJL-HEWjAldBAy1QUPOAevF9ZwGWzGlEiwJDoeqyY0nKI3UD9VVL_JmuhY0NV5QeN0Ct6HkI6Hyf06c6fl2FU6wo);
background-color: #e5ddd5
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px
}</style>
</head>
<body class="bg-surface font-body-md text-on-surface">
<!-- Sidebar (Shared Component) -->
<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="text-on-surface-variant font-body-sm">Admin Console</p>
</div>
<nav class="flex-grow space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">contacts</span>
<span class="font-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-primary font-bold bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">webhook</span>
<span class="font-body-md">Webhooks</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span class="font-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<button class="mb-8 w-full py-3 bg-primary text-on-primary rounded-xl font-bold flex items-center justify-center gap-2 scale-98 transition-transform duration-200 hover:opacity-90">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<div class="border-t border-surface-variant pt-6 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
<span class="font-body-sm">Help Center</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-sm">Logout</span>
</a>
</div>
</aside>
<!-- Top Navigation Bar (Shared Component) -->
<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-px bg-surface-variant"></div>
<div class="flex gap-4">
<span class="text-primary font-bold border-b-2 border-primary cursor-pointer font-title-sm">English</span>
<span class="text-on-surface-variant hover:text-primary transition-all cursor-pointer font-title-sm">Bahasa</span>
</div>
</div>
<div class="flex items-center gap-6">
<div class="relative hidden lg:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="pl-10 pr-4 py-2 bg-surface-container rounded-full border-none text-body-sm w-64 focus:ring-2 focus:ring-primary" placeholder="Search templates..." type="text"/>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors opacity-90 hover:opacity-100">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors opacity-90 hover:opacity-100">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden bg-surface-variant">
<img alt="Admin Profile Image" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRt2Sm_SCbedgGq0kqEpSpoCFqsqe7ZH-zitTTIB-5I0JdpBK9keSHWcw7D8qReRF1vYApbUEMWoPwWXZhmfe2Hs-ZGro_4jJk0qiRk9-3rBrnN-x7WMAv71SDdJmG_LSIUVqR_Ni7eVK4MxXkPjQuMc2rl9Smb8kE_-hiksiCaQVARLtI9-Xq-GWfmks7HOuZVFX6EFgJ5wNAMpocGF3ncjrOxp79FmjYDH_N0ofk3RXLugxdNAcceKIs-EWx10RQAm8qaKrrUaw"/>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="ml-[260px] pt-[64px] min-h-screen bg-surface">
<div class="max-w-[1440px] mx-auto p-container-margin">
<!-- Contextual Header Actions -->
<div class="flex justify-between items-center mb-8">
<div>
<h3 class="font-display-lg text-display-lg text-text-primary">Create Message Template</h3>
<p class="text-text-secondary font-body-md mt-1">Design and submit your business messages for WhatsApp approval.</p>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 border-2 border-outline text-outline font-bold rounded-lg hover:bg-surface-variant transition-colors">
Save Draft
</button>
<button class="px-6 py-2.5 bg-primary text-on-primary font-bold rounded-lg shadow-md hover:opacity-90 transition-all flex items-center gap-2">
Submit for Approval
<span class="material-symbols-outlined">send</span>
</button>
</div>
</div>
<!-- Editor Grid Layout -->
<div class="grid grid-cols-12 gap-8">
<!-- Left Panel: Template Configuration -->
<div class="col-span-12 lg:col-span-7 space-y-6">
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
<h4 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">edit_note</span>
Basic Details
</h4>
<div class="grid grid-cols-2 gap-6">
<div class="col-span-2">
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Template Name</label>
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="e.g., welcome_message" type="text" value="seasonal_sale_alert"/>
</div>
<div>
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Category</label>
<select class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
<option selected="">Marketing</option>
<option>Utility</option>
<option>Authentication</option>
</select>
</div>
<div>
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Language</label>
<select class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all">
<option selected="">English (US)</option>
<option>Spanish</option>
<option>Portuguese (BR)</option>
</select>
</div>
</div>
</div>
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
<div class="flex justify-between items-center mb-6">
<h4 class="font-title-sm text-title-sm flex items-center gap-2">
<span class="material-symbols-outlined text-primary">subject</span>
Message Content
</h4>
<div class="flex gap-2">
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-variant transition-colors" title="Add Variable">
<span class="material-symbols-outlined text-on-surface-variant">add_circle</span>
</button>
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-variant transition-colors" title="Add Emoji">
<span class="material-symbols-outlined text-on-surface-variant">mood</span>
</button>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Header (Optional)</label>
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Add a title or choose media" type="text"/>
</div>
<div>
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Body Text</label>
<textarea class="w-full bg-surface p-4 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-body-md leading-relaxed" placeholder="Enter message text here..." rows="6">Hi {{1}}, our Summer Sale is finally here! 🌴
Get up to 50% OFF on all collections using code {{2}} at checkout.
Shop now: https://example.com/shop</textarea>
<div class="mt-2 flex items-center justify-between">
<span class="text-body-sm text-text-secondary">Variables detected: 2</span>
<button class="text-primary font-bold text-body-sm hover:underline">Manage Variables</button>
</div>
</div>
<div>
<label class="block font-label-caps text-label-caps text-text-secondary uppercase mb-2">Footer (Optional)</label>
<input class="w-full bg-surface p-3 rounded-lg border-border-subtle focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Add a short line of text" type="text"/>
</div>
</div>
</div>
<div class="bg-surface-card rounded-xl shadow-sm p-card-padding">
<h4 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">smart_button</span>
Buttons
</h4>
<div class="space-y-4">
<div class="flex items-center gap-4 p-4 bg-surface rounded-lg border border-dashed border-outline-variant">
<span class="material-symbols-outlined text-outline">ads_click</span>
<div class="flex-grow">
<p class="font-body-md font-semibold">Quick Reply: Opt-out</p>
<p class="text-body-sm text-text-secondary">Label: Stop promotions</p>
</div>
<button class="text-error"><span class="material-symbols-outlined">delete</span></button>
</div>
<button class="w-full py-3 border-2 border-dashed border-primary/30 text-primary font-bold rounded-lg flex items-center justify-center gap-2 hover:bg-primary/5 transition-colors">
<span class="material-symbols-outlined">add</span>
Add Button (Max 10)
</button>
</div>
</div>
</div>
<!-- Right Panel: Real-time Mobile Preview -->
<div class="col-span-12 lg:col-span-5">
<div class="sticky top-24 flex flex-col items-center">
<div class="relative w-[340px] h-[680px] bg-black rounded-[50px] border-[8px] border-slate-800 shadow-2xl overflow-hidden flex flex-col">
<!-- Phone Notch/StatusBar -->
<div class="h-10 w-full flex justify-between items-center px-8 pt-2">
<span class="text-[12px] text-white font-bold">9:41</span>
<div class="flex gap-1.5">
<span class="material-symbols-outlined text-[14px] text-white">signal_cellular_4_bar</span>
<span class="material-symbols-outlined text-[14px] text-white">wifi</span>
<span class="material-symbols-outlined text-[14px] text-white">battery_full</span>
</div>
</div>
<!-- WhatsApp App UI -->
<div class="flex-grow flex flex-col whatsapp-bg relative">
<!-- App Header -->
<div class="h-[60px] bg-[#075E54] flex items-center px-4 gap-3 text-white">
<span class="material-symbols-outlined">arrow_back</span>
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center overflow-hidden">
<img alt="Business Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA011ej674nTk-r3uJBSaWhSscEauW4ThCTlTylJyFIlOuHL8GSY8YXLZEjE5Ejp6LsNvQGTx6OZ7fcFA2krE5tMaTxUWtnC1QYKh5St9zI7S8YrV7647cKgeRFKsBE0WAoTH6cU69ux0Mesg16tGeLk3BvC1vHH39Pw7NhCGVk9tifo-t5xiWfK1qwXjzecmLpTGHlBnIqAAyKPo6eX_Cao8wRe9LcHsH670Oo_um9RwuuiWHNw3ObavnWwz1DDJlMFuEz0JybLiw"/>
</div>
<div class="flex-grow">
<p class="font-bold text-[14px] leading-tight">Your Business</p>
<p class="text-[11px] opacity-80">online</p>
</div>
<span class="material-symbols-outlined text-[20px]">videocam</span>
<span class="material-symbols-outlined text-[20px]">call</span>
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</div>
<!-- Chat Bubbles -->
<div class="p-4 flex flex-col space-y-4">
<!-- Date Stamp -->
<div class="self-center bg-[#d1e5f0] text-[#556b77] text-[11px] px-3 py-1 rounded-md shadow-sm">TODAY</div>
<!-- Message Template Bubble -->
<div class="max-w-[85%] self-start flex flex-col shadow-sm">
<div class="bg-white rounded-tr-xl rounded-br-xl rounded-bl-xl p-3 relative">
<!-- Message Text -->
<p class="text-[14px] leading-tight text-gray-800">
Hi <span class="text-primary font-bold">[Alex]</span>, our Summer Sale is finally here! 🌴<br/><br/>
Get up to 50% OFF on all collections using code <span class="text-primary font-bold">[SUMMER50]</span> at checkout.<br/><br/>
Shop now: <span class="text-blue-600 underline">https://example.com/shop</span>
</p>
<!-- Time & Tick -->
<div class="flex justify-end items-center gap-1 mt-1">
<span class="text-[10px] text-gray-500">09:41 AM</span>
<span class="material-symbols-outlined text-[14px] text-blue-500" style="font-variation-settings: 'FILL' 1;">done_all</span>
</div>
</div>
<!-- Interactive Button -->
<button class="mt-0.5 bg-white border-t border-gray-100 rounded-b-xl py-2.5 flex items-center justify-center gap-2 text-blue-500 font-semibold text-[13px] hover:bg-gray-50 active:bg-gray-100 transition-colors">
<span class="material-symbols-outlined text-[18px]">reply</span>
Stop promotions
</button>
</div>
</div>
<!-- Input Bar Placeholder -->
<div class="absolute bottom-4 left-0 w-full px-2 flex items-center gap-2">
<div class="flex-grow h-10 bg-white rounded-full flex items-center px-4 gap-3 shadow-sm">
<span class="material-symbols-outlined text-gray-400">mood</span>
<span class="text-gray-400 text-[14px] flex-grow">Message</span>
<span class="material-symbols-outlined text-gray-400">attach_file</span>
<span class="material-symbols-outlined text-gray-400">photo_camera</span>
</div>
<div class="w-10 h-10 bg-[#075E54] rounded-full flex items-center justify-center text-white shadow-sm">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mic</span>
</div>
</div>
</div>
</div>
<!-- Preview Toggle -->
<div class="mt-8 bg-surface-card rounded-full p-1 shadow-sm border border-border-subtle flex gap-2">
<button class="px-6 py-2 rounded-full bg-primary text-on-primary font-bold text-body-sm">Mobile</button>
<button class="px-6 py-2 rounded-full text-text-secondary font-bold text-body-sm hover:bg-surface-container transition-colors">Desktop</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Success Modal (Hidden by default) -->
<div class="hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center">
<div class="bg-surface-card rounded-2xl p-8 max-w-md w-full shadow-2xl text-center">
<div class="w-20 h-20 bg-primary-container text-on-primary-container rounded-full flex items-center justify-center mx-auto mb-6">
<span class="material-symbols-outlined text-[40px]">check_circle</span>
</div>
<h5 class="font-headline-md text-headline-md mb-2">Template Submitted</h5>
<p class="text-text-secondary font-body-md mb-8">Your template 'seasonal_sale_alert' has been sent to Meta for approval. This usually takes 2-4 hours.</p>
<button class="w-full py-4 bg-primary text-on-primary font-bold rounded-xl">Back to Dashboard</button>
</div>
</div>
</body></html>

BIN
stitch_bizone/template_builder_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 477 KiB

392
stitch_bizone/template_list_whatsapp_business_admin/code.html
View File

@ -1,392 +0,0 @@
<!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 - Template List</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": {
"surface-container-highest": "#dce5d8",
"secondary": "#006b5f",
"secondary-fixed": "#8ff4e3",
"on-primary-fixed": "#002109",
"on-primary-fixed-variant": "#005322",
"on-surface": "#151e16",
"on-tertiary-container": "#78351b",
"on-surface-variant": "#3c4a3d",
"surface-container-high": "#e2ebde",
"error-container": "#ffdad6",
"text-secondary": "#64748B",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#3de273",
"border-subtle": "#E2E8F0",
"tertiary-container": "#ffa07e",
"secondary-fixed-dim": "#72d8c8",
"on-tertiary": "#ffffff",
"status-success": "#25D366",
"outline-variant": "#bbcbb9",
"tertiary-fixed-dim": "#ffb59b",
"tertiary-fixed": "#ffdbcf",
"background": "#f3fcef",
"surface-container": "#e7f1e4",
"on-secondary": "#ffffff",
"status-error": "#EF4444",
"tertiary": "#93492e",
"surface-card": "#FFFFFF",
"surface-variant": "#dce5d8",
"inverse-on-surface": "#eaf3e6",
"on-secondary-fixed": "#00201c",
"on-tertiary-fixed-variant": "#763319",
"on-tertiary-fixed": "#380d00",
"on-primary-container": "#005523",
"inverse-primary": "#3de273",
"surface": "#f3fcef",
"secondary-container": "#8cf1e1",
"background-main": "#F8F9FA",
"status-info": "#3B82F6",
"surface-tint": "#006d2f",
"status-warning": "#F59E0B",
"surface-bright": "#f3fcef",
"primary": "#006d2f",
"surface-container-low": "#edf6e9",
"on-error-container": "#93000a",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-dim": "#d3ddd0",
"on-secondary-fixed-variant": "#005047",
"on-secondary-container": "#006f64",
"outline": "#6c7b6b",
"inverse-surface": "#2a332a",
"primary-fixed": "#66ff8e",
"on-background": "#151e16",
"on-primary": "#ffffff",
"text-primary": "#1A1C1E",
"primary-container": "#25d366"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"base": "8px",
"card-padding": "20px",
"toolbar-height": "64px",
"container-margin": "32px",
"sidebar-width": "260px"
},
"fontFamily": {
"title-sm": ["Plus Jakarta Sans"],
"label-caps": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"mono-code": ["jetbrainsMono"]
},
"fontSize": {
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"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;
color: #151e16;
margin: 0;
}
</style>
</head>
<body class="font-body-md text-body-md">
<!-- 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">Admin Console</p>
</div>
<button class="mb-8 flex items-center justify-center gap-2 bg-primary text-on-primary py-3 px-4 rounded-xl font-title-sm hover:opacity-90 transition-opacity w-full">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-grow space-y-1">
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span>Dashboard</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="chat">chat</span>
<span>Conversations</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
<span>Contacts</span>
</a>
<!-- Active State for Templates -->
<a class="flex items-center gap-3 py-3 px-4 rounded-lg bg-surface-container-low text-primary font-bold transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span>Templates</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
<span>Webhooks</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span>Analytics</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span>Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-surface-container space-y-1">
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
<span>Help Center</span>
</a>
<a class="flex items-center gap-3 py-3 px-4 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span>Logout</span>
</a>
</div>
</aside>
<!-- Main Content Wrapper -->
<main class="ml-[260px] min-h-screen">
<!-- 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-surface-container-highest"></div>
<div class="flex gap-4 text-on-surface-variant font-body-sm">
<span class="text-primary font-bold cursor-pointer">English</span>
<span class="hover:text-primary cursor-pointer transition-colors">Bahasa</span>
</div>
</div>
<div class="flex items-center gap-6">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
<input class="pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full w-64 focus:ring-2 focus:ring-primary text-body-sm" placeholder="Search templates..." type="text"/>
</div>
<div class="flex items-center gap-4 text-on-surface-variant">
<button class="hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
<img alt="Admin Profile Image" class="w-8 h-8 rounded-full object-cover" data-alt="A professional headshot of a corporate administrator in a clean, modern studio setting. The lighting is soft and flattering, emphasizing a trustworthy and expert personality. The overall aesthetic is professional and high-end, utilizing a crisp and bright color palette that aligns with a premium software dashboard atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCIhHQKzzPpae4eWbVXY5HUYRR2lLAD-a0W4CS3I3pR6QlpiB2FObMq12uF9N_HZMO1ujgWtRG6tbu_tyTch9AJzZAOBmfBWRJD0kPA08gZ4WdzGaf_4GpB_Xyh4IhJrHX0utCOKVu3E2zb9AoB2W3Z07j_AN8KaT1EvS-O1R284ykl04HrPugo8W4K6hzF1S1AGouTOa6SvX6Ltd6_lQlv8s0YOCRL3CN9X809iGVmg0Lyxiz3IK7Jxt5mu3EkiHryG9ohugP-iII"/>
</div>
</div>
</header>
<!-- Canvas Area -->
<div class="mt-toolbar-height p-container-margin">
<!-- Page Header & Action Bar -->
<div class="flex justify-between items-end mb-8">
<div>
<h3 class="font-display-lg text-display-lg text-on-surface mb-2">Message Templates</h3>
<p class="text-on-surface-variant max-w-2xl text-body-md">Create and manage your WhatsApp message templates. All templates must be approved by WhatsApp before sending.</p>
</div>
<button class="bg-primary text-on-primary font-title-sm px-6 py-3 rounded-lg shadow-sm hover:opacity-90 flex items-center gap-2 transition-all">
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
Create New Template
</button>
</div>
<!-- Filter Controls -->
<div class="flex flex-wrap gap-4 mb-6">
<div class="flex items-center gap-2 px-4 py-2 bg-surface-container-lowest rounded-full border border-surface-container-highest text-on-surface-variant font-body-sm cursor-pointer hover:border-primary transition-colors">
<span>Category: All</span>
<span class="material-symbols-outlined text-[18px]" data-icon="expand_more">expand_more</span>
</div>
<div class="flex items-center gap-2 px-4 py-2 bg-surface-container-lowest rounded-full border border-surface-container-highest text-on-surface-variant font-body-sm cursor-pointer hover:border-primary transition-colors">
<span>Status: Approved</span>
<span class="material-symbols-outlined text-[18px]" data-icon="expand_more">expand_more</span>
</div>
<div class="flex items-center gap-2 px-4 py-2 bg-surface-container-lowest rounded-full border border-surface-container-highest text-on-surface-variant font-body-sm cursor-pointer hover:border-primary transition-colors">
<span>Language: All</span>
<span class="material-symbols-outlined text-[18px]" data-icon="expand_more">expand_more</span>
</div>
<div class="ml-auto text-on-surface-variant text-body-sm self-center">
Showing 12 Templates
</div>
</div>
<!-- Bento Grid List -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Template Card 1 (Approved) -->
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="px-3 py-1 bg-primary-container text-on-primary-container rounded-full font-label-caps text-label-caps">Approved</div>
<button class="text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</div>
<h4 class="font-title-sm text-title-sm mb-1 text-on-surface">order_confirmation_v2</h4>
<p class="font-label-caps text-label-caps text-secondary mb-4">UTILITY</p>
<div class="p-4 bg-background rounded-lg mb-4 h-32 overflow-hidden relative">
<p class="text-body-sm text-on-surface-variant italic">"Hi {{1}}, thank you for your order #{{2}}! We've received your payment and will notify you when it ships..."</p>
<div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background to-transparent"></div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-surface-container">
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="schedule">schedule</span>
Updated 2h ago
</div>
<span class="material-symbols-outlined text-primary cursor-pointer" data-icon="edit">edit</span>
</div>
</div>
<!-- Template Card 2 (Pending) -->
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant rounded-full font-label-caps text-label-caps">Pending</div>
<button class="text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</div>
<h4 class="font-title-sm text-title-sm mb-1 text-on-surface">holiday_sale_promo</h4>
<p class="font-label-caps text-label-caps text-secondary mb-4">MARKETING</p>
<div class="p-4 bg-background rounded-lg mb-4 h-32 overflow-hidden relative">
<p class="text-body-sm text-on-surface-variant italic">"🎉 Exclusive Holiday Sale! Get 30% OFF on all items using code FESTIVE30. Shop now at {{1}}..."</p>
<div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background to-transparent"></div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-surface-container">
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="schedule">schedule</span>
Updated 1d ago
</div>
<span class="material-symbols-outlined text-primary cursor-pointer" data-icon="edit">edit</span>
</div>
</div>
<!-- Template Card 3 (Rejected) -->
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="px-3 py-1 bg-error-container text-on-error-container rounded-full font-label-caps text-label-caps">Rejected</div>
<button class="text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</div>
<h4 class="font-title-sm text-title-sm mb-1 text-on-surface">account_recovery_otp</h4>
<p class="font-label-caps text-label-caps text-secondary mb-4">AUTHENTICATION</p>
<div class="p-4 bg-background rounded-lg mb-4 h-32 overflow-hidden relative">
<p class="text-body-sm text-on-surface-variant italic">"Your recovery code is {{1}}. Do not share this with anyone. This code expires in 5 minutes."</p>
<div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background to-transparent"></div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-surface-container">
<div class="flex items-center gap-2 text-status-error text-body-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="warning">warning</span>
Needs Review
</div>
<span class="material-symbols-outlined text-primary cursor-pointer" data-icon="edit">edit</span>
</div>
</div>
<!-- Template Card 4 (Approved - Table Style Row) -->
<div class="md:col-span-2 lg:col-span-3 bg-surface-container-lowest p-4 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all flex items-center gap-6">
<div class="w-12 h-12 rounded-lg bg-surface-container flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-3xl" data-icon="mail">mail</span>
</div>
<div class="flex-grow">
<h4 class="font-title-sm text-title-sm text-on-surface">shipping_update_express</h4>
<div class="flex items-center gap-3 mt-1">
<span class="font-label-caps text-label-caps text-secondary">UTILITY</span>
<span class="w-1 h-1 rounded-full bg-outline-variant"></span>
<span class="text-on-surface-variant text-body-sm italic truncate max-w-md">"Good news! Your package is out for delivery..."</span>
</div>
</div>
<div class="hidden lg:block text-center px-6">
<p class="text-body-sm text-on-surface-variant">Last Modified</p>
<p class="font-title-sm text-body-md text-on-surface">Oct 24, 2023</p>
</div>
<div class="flex items-center gap-4 px-6 border-l border-surface-container-highest">
<div class="px-3 py-1 bg-primary-container text-on-primary-container rounded-full font-label-caps text-label-caps">Approved</div>
</div>
<div class="flex gap-2">
<button class="p-2 hover:bg-surface-container rounded-lg transition-colors text-on-surface-variant">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
<button class="p-2 hover:bg-surface-container rounded-lg transition-colors text-primary">
<span class="material-symbols-outlined" data-icon="edit">edit</span>
</button>
</div>
</div>
<!-- Template Card 5 -->
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="px-3 py-1 bg-primary-container text-on-primary-container rounded-full font-label-caps text-label-caps">Approved</div>
<button class="text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</div>
<h4 class="font-title-sm text-title-sm mb-1 text-on-surface">welcome_onboarding_v4</h4>
<p class="font-label-caps text-label-caps text-secondary mb-4">MARKETING</p>
<div class="p-4 bg-background rounded-lg mb-4 h-32 overflow-hidden relative">
<p class="text-body-sm text-on-surface-variant italic">"Welcome to the community {{1}}! We're thrilled to have you here. To get started, please check out..."</p>
<div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background to-transparent"></div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-surface-container">
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="schedule">schedule</span>
Updated 3d ago
</div>
<span class="material-symbols-outlined text-primary cursor-pointer" data-icon="edit">edit</span>
</div>
</div>
<!-- Template Card 6 -->
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-transparent hover:border-primary transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="px-3 py-1 bg-primary-container text-on-primary-container rounded-full font-label-caps text-label-caps">Approved</div>
<button class="text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</div>
<h4 class="font-title-sm text-title-sm mb-1 text-on-surface">appointment_remind_6h</h4>
<p class="font-label-caps text-label-caps text-secondary mb-4">UTILITY</p>
<div class="p-4 bg-background rounded-lg mb-4 h-32 overflow-hidden relative">
<p class="text-body-sm text-on-surface-variant italic">"Reminder: Your appointment at {{1}} starts in 6 hours. If you need to reschedule, please call..."</p>
<div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-background to-transparent"></div>
</div>
<div class="flex justify-between items-center pt-4 border-t border-surface-container">
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
<span class="material-symbols-outlined text-[18px]" data-icon="schedule">schedule</span>
Updated 1w ago
</div>
<span class="material-symbols-outlined text-primary cursor-pointer" data-icon="edit">edit</span>
</div>
</div>
</div>
<!-- Empty State / Footer Callout -->
<div class="mt-12 p-8 bg-surface-container rounded-2xl flex flex-col md:flex-row items-center gap-8 border border-dashed border-outline-variant">
<div class="w-24 h-24 rounded-full bg-surface-container-highest flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-5xl" data-icon="contact_support">contact_support</span>
</div>
<div class="text-center md:text-left">
<h5 class="font-title-sm text-title-sm text-on-surface mb-1">Need help with Template Guidelines?</h5>
<p class="text-on-surface-variant text-body-sm max-w-lg">WhatsApp has strict policies on message content. Ensure your templates follow the Business Policy to avoid rejection and maintain a high quality rating.</p>
</div>
<div class="md:ml-auto">
<button class="bg-white border border-surface-container-highest text-on-surface font-title-sm px-6 py-2 rounded-lg hover:bg-surface-container-lowest transition-all">
Read Guidelines
</button>
</div>
</div>
</div>
</main>
</body></html>

BIN
stitch_bizone/template_list_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 426 KiB

342
stitch_bizone/user_management_bizone_standard_layout/code.html Normal file
View File

@ -0,0 +1,342 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Management - 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;500;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"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
}
.sidebar-scroll::-webkit-scrollbar {
width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
.bg-bizone-navy {
background-color: #001b44;
}
.text-bizone-blue {
color: #38bdf8;
}
.bg-bizone-blue {
background-color: #38bdf8;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary": "#001b44",
"secondary": "#38bdf8",
"surface": "#f8fafc",
"background": "#f8fafc",
"text-primary": "#1e293b",
"text-secondary": "#64748b",
"border-subtle": "#e2e8f0",
"surface-card": "#ffffff",
"status-success": "#10b981",
"status-warning": "#f59e0b",
"status-error": "#ef4444"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"sidebar-width": "260px",
"toolbar-height": "72px",
"gutter": "24px",
"container-margin": "32px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
"title-sm": ["Plus Jakarta Sans"],
"display-lg": ["Plus Jakarta Sans"],
"body-md": ["Inter"]
}
}
}
}
</script>
</head>
<body class="bg-background text-text-primary">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-[260px] bg-bizone-navy shadow-lg flex flex-col z-50">
<!-- Sidebar Header (White background, 72px) -->
<div class="h-[72px] bg-white flex items-center px-6 shrink-0">
<img alt="BizOne Logo" class="h-8" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
</div>
<!-- Sidebar Content -->
<div class="mt-8 px-4 flex flex-col flex-1">
<button class="mb-8 w-full bg-bizone-blue text-white py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-opacity-90 transition-all shadow-md shadow-sky-500/20">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-1 space-y-1 sidebar-scroll overflow-y-auto">
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-body-md text-body-md">Dashboard</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md text-body-md">Conversations</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">contacts</span>
<span class="font-body-md text-body-md">Contacts</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md text-body-md">Templates</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">webhook</span>
<span class="font-body-md text-body-md">Webhooks</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">monitoring</span>
<span class="font-body-md text-body-md">Analytics</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors bg-white/10 text-bizone-blue font-bold">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md text-body-md">Settings</span>
</div>
</nav>
<div class="mt-auto py-6 border-t border-white/10 space-y-1">
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">help</span>
<span class="font-body-md text-body-md">Help Center</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-md text-body-md">Logout</span>
</div>
</div>
</div>
</aside>
<!-- TopNavBar (72px height, white background) -->
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[72px] bg-white shadow-sm flex justify-between items-center px-gutter z-40 border-b border-slate-100">
<div class="flex items-center gap-4">
<span class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</span>
<div class="h-6 w-px bg-slate-200"></div>
<div class="flex items-center gap-2 text-text-secondary font-body-sm">
<span class="material-symbols-outlined text-[20px]">search</span>
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-64" placeholder="Search team members..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 text-text-secondary">
<button class="hover:text-primary transition-all font-semibold">English</button>
<button class="hover:text-primary transition-all font-semibold">Bahasa</button>
</div>
<div class="flex items-center gap-4 border-l border-slate-200 pl-6">
<button class="material-symbols-outlined text-text-secondary hover:text-primary transition-colors">notifications</button>
<button class="material-symbols-outlined text-text-secondary hover:text-primary transition-colors">settings</button>
<img alt="Admin Profile" class="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8oEQFh6BZPjOhqAGdhe-gVA3nsnk1coxpTEv6pqAO6H_YU7xQmP6hbiLSfVAsIncf5bNItNqVIds3NRy2dfOgmdWEFS8qofRPJfFAxItutzsQCcMXk5RYRa0y125qpJoriz1QPpoWBZIfFEZoV8a0NfToPKVpnDaP5yKbsDl3TRu3rOELFYIJ0pelTFEU9XPaRUHJpFsMp7SseycWBSIxC0eke_oXngFNc_EB21MRcOxQrrm2fKFzqHILOL9o78vU4r5OJKmEVrE"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="ml-[260px] pt-[72px] min-h-screen p-container-margin">
<div class="max-w-7xl mx-auto">
<!-- Page Header -->
<div class="flex justify-between items-end mb-8">
<div>
<h2 class="font-display-lg text-display-lg text-primary font-bold">User Management</h2>
<p class="text-text-secondary font-body-md mt-1">Manage team access levels, roles, and security permissions.</p>
</div>
<button class="bg-primary text-white py-3 px-6 rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-primary/20 hover:translate-y-[-2px] transition-all">
<span class="material-symbols-outlined">person_add</span>
Create User
</button>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-12 gap-6 mb-8">
<div class="col-span-12 md:col-span-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between">
<div>
<p class="text-[12px] font-bold text-text-secondary tracking-wider mb-2 uppercase">Total Users</p>
<h3 class="text-3xl font-bold text-primary">42</h3>
<p class="text-status-success text-sm font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
+3 this month
</p>
</div>
<div class="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[32px]">group</span>
</div>
</div>
<div class="col-span-12 md:col-span-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between">
<div>
<p class="text-[12px] font-bold text-text-secondary tracking-wider mb-2 uppercase">Pending Invites</p>
<h3 class="text-3xl font-bold text-primary">07</h3>
<p class="text-status-warning text-sm font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[16px]">schedule</span>
Awaiting response
</p>
</div>
<div class="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[32px]">mail</span>
</div>
</div>
<div class="col-span-12 md:col-span-4 bg-primary text-white p-6 rounded-2xl shadow-sm flex items-center justify-between overflow-hidden relative">
<div class="relative z-10">
<p class="text-[12px] font-bold text-white/70 tracking-wider mb-2 uppercase">Active Sessions</p>
<h3 class="text-3xl font-bold">18</h3>
<p class="text-white/80 text-sm flex items-center gap-1 mt-1">
Real-time activity
</p>
</div>
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center relative z-10">
<span class="material-symbols-outlined text-[32px]">bolt</span>
</div>
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
</div>
</div>
<!-- Table Section -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
<div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
<h4 class="font-bold text-primary">Team Members</h4>
<div class="flex gap-3">
<button class="px-4 py-2 rounded-lg bg-white text-text-secondary text-sm font-semibold flex items-center gap-2 border border-slate-200 hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[20px]">filter_list</span>
Filter
</button>
<button class="px-4 py-2 rounded-lg bg-white text-text-secondary text-sm font-semibold flex items-center gap-2 border border-slate-200 hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[20px]">download</span>
Export
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-slate-50/30">
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Name / Email</th>
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Role</th>
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Last Active</th>
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Status</th>
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- Row 1 -->
<tr class="hover:bg-slate-50/50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-primary font-bold">JD</div>
<div>
<p class="text-sm font-bold text-primary">Jane Doe</p>
<p class="text-xs text-text-secondary">jane.doe@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2.5 py-0.5 bg-slate-100 text-primary rounded-full text-[10px] font-bold uppercase tracking-tight">Admin</span>
</td>
<td class="px-6 py-4 text-sm text-text-secondary">Just now</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-sm font-medium text-primary">Active</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-1">
<button class="p-2 text-text-secondary hover:text-primary hover:bg-slate-100 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">edit</span></button>
<button class="p-2 text-text-secondary hover:text-status-error hover:bg-red-50 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">delete</span></button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50/50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdgKOJ0-3KNanadmge4DC6A0V7NIUSszWe7fLpcauOwUT6tN7-yq2589zkMHlru4o0ItgBrUHUc84Se6jBrrt0AFap5zEsHR6mg5j6lja9PmMVTR8YEmBxR7SwKRfwn_3qG2gEXb2A4dAqUyR3ZQUe9_kJDWRGtfiMR1esx6XEIiiBtUF6vnMQVjeBPiFWi4UgJDZsQ0bExxi9s8bN0ns0k1kkH8l4QHqssmNmUyxF42CEXzNWrASw5283qzpX5VauQ9WEZHiImE0"/>
<div>
<p class="text-sm font-bold text-primary">Alex Miller</p>
<p class="text-xs text-text-secondary">alex.m@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-2.5 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold uppercase tracking-tight">Editor</span>
</td>
<td class="px-6 py-4 text-sm text-text-secondary">2 hours ago</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-sm font-medium text-primary">Active</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-1">
<button class="p-2 text-text-secondary hover:text-primary hover:bg-slate-100 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">edit</span></button>
<button class="p-2 text-text-secondary hover:text-status-error hover:bg-red-50 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">delete</span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 bg-slate-50/50 border-t border-slate-100 flex items-center justify-between">
<p class="text-xs font-medium text-text-secondary">Showing 1 to 2 of 42 members</p>
<div class="flex gap-1">
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white font-bold text-xs">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors text-xs font-bold">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Role Permissions Cards -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-1">
<h5 class="font-bold text-primary text-lg mb-2">Role Permissions</h5>
<p class="text-sm text-text-secondary">Quick overview of what each team member can access across the BizOne platform.</p>
</div>
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
<div class="flex items-center gap-2 text-primary mb-3">
<span class="material-symbols-outlined text-[20px]">verified_user</span>
<span class="text-[11px] font-bold uppercase tracking-wider">Admin</span>
</div>
<p class="text-xs text-text-secondary leading-relaxed font-medium">Full system access, including billing, user management, and API settings.</p>
</div>
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
<div class="flex items-center gap-2 text-blue-600 mb-3">
<span class="material-symbols-outlined text-[20px]">edit_note</span>
<span class="text-[11px] font-bold uppercase tracking-wider">Editor</span>
</div>
<p class="text-xs text-text-secondary leading-relaxed font-medium">Manage broadcasts and templates, but cannot change system settings.</p>
</div>
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
<div class="flex items-center gap-2 text-slate-600 mb-3">
<span class="material-symbols-outlined text-[20px]">support_agent</span>
<span class="text-[11px] font-bold uppercase tracking-wider">Agent</span>
</div>
<p class="text-xs text-text-secondary leading-relaxed font-medium">Limited to managing chat conversations and contact lists only.</p>
</div>
</div>
</div>
</div>
</main>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

464
stitch_bizone/users_roles_whatsapp_business_admin/code.html
View File

@ -1,464 +0,0 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Management - WhatsApp Business 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;500;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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f3fcef;
}
.sidebar-scroll::-webkit-scrollbar {
width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.05);
border-radius: 10px;
}
</style>
<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>
</head>
<body class="bg-background text-on-surface">
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest dark:bg-surface-container-low 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="text-on-surface-variant font-body-sm text-body-sm opacity-70">Admin Console</p>
</div>
<button class="mb-8 w-full bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">add</span>
New Broadcast
</button>
<nav class="flex-1 space-y-1 sidebar-scroll overflow-y-auto">
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-body-md text-body-md">Dashboard</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">chat</span>
<span class="font-body-md text-body-md">Conversations</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">contacts</span>
<span class="font-body-md text-body-md">Contacts</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">description</span>
<span class="font-body-md text-body-md">Templates</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">webhook</span>
<span class="font-body-md text-body-md">Webhooks</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">monitoring</span>
<span class="font-body-md text-body-md">Analytics</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors bg-surface-container-low text-primary font-bold">
<span class="material-symbols-outlined">settings</span>
<span class="font-body-md text-body-md">Settings</span>
</div>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant/30 space-y-1">
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">help</span>
<span class="font-body-md text-body-md">Help Center</span>
</div>
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
<span class="material-symbols-outlined">logout</span>
<span class="font-body-md text-body-md">Logout</span>
</div>
</div>
</aside>
<!-- TopNavBar -->
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex justify-between items-center px-gutter z-40">
<div class="flex items-center gap-4">
<span class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</span>
<div class="h-6 w-px bg-outline-variant"></div>
<div class="flex items-center gap-2 text-on-surface-variant font-body-sm">
<span class="material-symbols-outlined text-[20px]">search</span>
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-64" placeholder="Search team members..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 text-on-surface-variant">
<button class="hover:text-primary transition-all font-title-sm text-title-sm">English</button>
<button class="hover:text-primary transition-all font-title-sm text-title-sm">Bahasa</button>
</div>
<div class="flex items-center gap-4 border-l border-outline-variant pl-6">
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">notifications</button>
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">settings</button>
<img alt="Admin Profile Image" class="w-8 h-8 rounded-full bg-surface-container border border-outline-variant" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8oEQFh6BZPjOhqAGdhe-gVA3nsnk1coxpTEv6pqAO6H_YU7xQmP6hbiLSfVAsIncf5bNItNqVIds3NRy2dfOgmdWEFS8qofRPJfFAxItutzsQCcMXk5RYRa0y125qpJoriz1QPpoWBZIfFEZoV8a0NfToPKVpnDaP5yKbsDl3TRu3rOELFYIJ0pelTFEU9XPaRUHJpFsMp7SseycWBSIxC0eke_oXngFNc_EB21MRcOxQrrm2fKFzqHILOL9o78vU4r5OJKmEVrE"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="ml-[260px] pt-[64px] min-h-screen p-container-margin">
<div class="max-w-7xl mx-auto">
<!-- Page Header -->
<div class="flex justify-between items-end mb-8">
<div>
<h2 class="font-display-lg text-display-lg text-on-surface">User Management</h2>
<p class="text-on-surface-variant font-body-md mt-1">Manage team access levels, roles, and security permissions.</p>
</div>
<button class="bg-primary text-on-primary py-3 px-6 rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-primary/20 hover:translate-y-[-2px] transition-all">
<span class="material-symbols-outlined">person_add</span>
Invite New User
</button>
</div>
<!-- Bento Stats Grid -->
<div class="grid grid-cols-12 gap-6 mb-8">
<div class="col-span-12 md:col-span-4 bg-surface-card p-6 rounded-2xl shadow-sm border border-outline-variant/30 flex items-center justify-between">
<div>
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL USERS</p>
<h3 class="font-display-lg text-display-lg">42</h3>
<p class="text-status-success font-body-sm flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
+3 this month
</p>
</div>
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[32px]">group</span>
</div>
</div>
<div class="col-span-12 md:col-span-4 bg-surface-card p-6 rounded-2xl shadow-sm border border-outline-variant/30 flex items-center justify-between">
<div>
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">PENDING INVITES</p>
<h3 class="font-display-lg text-display-lg">07</h3>
<p class="text-status-warning font-body-sm flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[16px]">schedule</span>
Awaiting response
</p>
</div>
<div class="w-14 h-14 bg-secondary-container/30 rounded-full flex items-center justify-center text-secondary">
<span class="material-symbols-outlined text-[32px]">mail</span>
</div>
</div>
<div class="col-span-12 md:col-span-4 bg-primary text-on-primary p-6 rounded-2xl shadow-sm flex items-center justify-between overflow-hidden relative">
<div class="relative z-10">
<p class="font-label-caps text-label-caps opacity-80 mb-2">ACTIVE SESSIONS</p>
<h3 class="font-display-lg text-display-lg">18</h3>
<p class="opacity-90 font-body-sm flex items-center gap-1 mt-1">
Current real-time activity
</p>
</div>
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center relative z-10">
<span class="material-symbols-outlined text-[32px]">bolt</span>
</div>
<!-- Decorative background shape -->
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
</div>
</div>
<!-- Table Section -->
<div class="bg-surface-card rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
<div class="px-6 py-5 border-b border-outline-variant/30 flex justify-between items-center bg-surface-container-lowest">
<h4 class="font-title-sm text-title-sm">Team Members</h4>
<div class="flex gap-3">
<button class="p-2 rounded-lg hover:bg-surface-container text-on-surface-variant flex items-center gap-2 border border-outline-variant/30">
<span class="material-symbols-outlined text-[20px]">filter_list</span>
<span class="text-body-sm">Filter</span>
</button>
<button class="p-2 rounded-lg hover:bg-surface-container text-on-surface-variant flex items-center gap-2 border border-outline-variant/30">
<span class="material-symbols-outlined text-[20px]">download</span>
<span class="text-body-sm">Export</span>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">NAME / EMAIL</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">ROLE</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">LAST ACTIVE</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant text-right">ACTIONS</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/20">
<!-- User Row 1 -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center text-primary font-bold">JD</div>
<div>
<p class="font-body-md text-on-surface font-semibold">Jane Doe</p>
<p class="text-body-sm text-on-surface-variant">jane.doe@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-tertiary-container/20 text-on-tertiary-container rounded-full font-label-caps text-[10px] border border-tertiary-container/30">ADMIN</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Just now</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-body-sm text-on-surface">Active</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- User Row 2 -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full" data-alt="A professional headshot portrait of a smiling marketing executive in a clean, modern office setting. The lighting is bright and airy with soft green and white tones in the background, matching a premium enterprise software interface aesthetic. The focus is sharp on the subject, creating a trustworthy and reliable corporate atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdgKOJ0-3KNanadmge4DC6A0V7NIUSszWe7fLpcauOwUT6tN7-yq2589zkMHlru4o0ItgBrUHUc84Se6jBrrt0AFap5zEsHR6mg5j6lja9PmMVTR8YEmBxR7SwKRfwn_3qG2gEXb2A4dAqUyR3ZQUe9_kJDWRGtfiMR1esx6XEIiiBtUF6vnMQVjeBPiFWi4UgJDZsQ0bExxi9s8bN0ns0k1kkH8l4QHqssmNmUyxF42CEXzNWrASw5283qzpX5VauQ9WEZHiImE0"/>
<div>
<p class="font-body-md text-on-surface font-semibold">Alex Miller</p>
<p class="text-body-sm text-on-surface-variant">alex.m@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container rounded-full font-label-caps text-[10px] border border-secondary-container/40">EDITOR</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">2 hours ago</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-success"></span>
<span class="text-body-sm text-on-surface">Active</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- User Row 3 -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant font-bold">SK</div>
<div>
<p class="font-body-md text-on-surface font-semibold">Sarah Khan</p>
<p class="text-body-sm text-on-surface-variant">s.khan@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-surface-variant/50 text-on-surface-variant rounded-full font-label-caps text-[10px] border border-outline-variant/30">AGENT</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Pending invite</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-warning"></span>
<span class="text-body-sm text-on-surface">Invited</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Resend Invite">
<span class="material-symbols-outlined text-[20px]">mail</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- User Row 4 -->
<tr class="hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center text-primary font-bold">RW</div>
<div>
<p class="font-body-md text-on-surface font-semibold">Robert Wong</p>
<p class="text-body-sm text-on-surface-variant">robert.wong@company.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-surface-variant/50 text-on-surface-variant rounded-full font-label-caps text-[10px] border border-outline-variant/30">AGENT</span>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">3 days ago</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-status-error"></span>
<span class="text-body-sm text-on-surface">Suspended</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<div class="flex justify-end gap-2">
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 bg-surface-container-lowest border-t border-outline-variant/30 flex items-center justify-between">
<p class="text-body-sm text-on-surface-variant">Showing 1 to 4 of 42 team members</p>
<div class="flex gap-1">
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary text-on-primary font-bold">1</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">2</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">3</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Role Definitions Card (Asymmetric Layout element) -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-1">
<h5 class="font-title-sm text-title-sm mb-2">Role Permissions</h5>
<p class="text-body-sm text-on-surface-variant">Quick overview of what each team member can access across the WhatsApp Business platform.</p>
</div>
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
<div class="flex items-center gap-2 text-on-tertiary-container mb-2">
<span class="material-symbols-outlined text-[18px]">verified_user</span>
<span class="font-label-caps text-label-caps">ADMIN</span>
</div>
<p class="text-body-sm text-on-surface-variant leading-relaxed">Full system access, including billing, user management, and API settings.</p>
</div>
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
<div class="flex items-center gap-2 text-on-secondary-container mb-2">
<span class="material-symbols-outlined text-[18px]">edit_note</span>
<span class="font-label-caps text-label-caps">EDITOR</span>
</div>
<p class="text-body-sm text-on-surface-variant leading-relaxed">Manage broadcasts and message templates, but cannot change system settings.</p>
</div>
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
<span class="material-symbols-outlined text-[18px]">support_agent</span>
<span class="font-label-caps text-label-caps">AGENT</span>
</div>
<p class="text-body-sm text-on-surface-variant leading-relaxed">Limited to managing active chat conversations and contact lists only.</p>
</div>
</div>
</div>
</div>
</main>
</body></html>

BIN
stitch_bizone/users_roles_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 318 KiB

421
stitch_bizone/webhook_logs_whatsapp_business_admin/code.html
View File

@ -1,421 +0,0 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Webhook Logs &amp; 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&amp;family=Inter:wght@400;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"/>
<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": {
"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>

BIN
stitch_bizone/webhook_logs_whatsapp_business_admin/screen.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 310 KiB

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