Initial BizOne portal setup
This commit is contained in:
197
stitch_bizone/2fa_verification_whatsapp_business_admin/code.html
Normal file
197
stitch_bizone/2fa_verification_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
380
stitch_bizone/api_settings_whatsapp_business_admin/code.html
Normal file
380
stitch_bizone/api_settings_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,380 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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
Normal file
BIN
stitch_bizone/api_settings_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
481
stitch_bizone/campaign_detail_whatsapp_business_admin/code.html
Normal file
481
stitch_bizone/campaign_detail_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,481 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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
Normal file
BIN
stitch_bizone/campaign_detail_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
505
stitch_bizone/campaign_list_whatsapp_business_admin/code.html
Normal file
505
stitch_bizone/campaign_list_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,505 @@
|
||||
<!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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<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
Normal file
BIN
stitch_bizone/campaign_list_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
390
stitch_bizone/contact_detail_whatsapp_business_admin/code.html
Normal file
390
stitch_bizone/contact_detail_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,390 @@
|
||||
<!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&family=Inter:wght@400;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-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
Normal file
BIN
stitch_bizone/contact_detail_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
435
stitch_bizone/contacts_list_whatsapp_business_admin/code.html
Normal file
435
stitch_bizone/contacts_list_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,435 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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
Normal file
BIN
stitch_bizone/contacts_list_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
410
stitch_bizone/conversations_whatsapp_business_admin/code.html
Normal file
410
stitch_bizone/conversations_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,410 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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
Normal file
BIN
stitch_bizone/conversations_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
@ -0,0 +1,438 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#dce5d8",
|
||||
"outline-variant": "#bbcbb9",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-high": "#e2ebde",
|
||||
"tertiary-fixed-dim": "#ffb59b",
|
||||
"tertiary": "#93492e",
|
||||
"surface-container-highest": "#dce5d8",
|
||||
"surface-container-low": "#edf6e9",
|
||||
"surface": "#f3fcef",
|
||||
"on-primary": "#ffffff",
|
||||
"outline": "#6c7b6b",
|
||||
"inverse-surface": "#2a332a",
|
||||
"secondary-container": "#8cf1e1",
|
||||
"on-error": "#ffffff",
|
||||
"status-success": "#25D366",
|
||||
"on-secondary-fixed": "#00201c",
|
||||
"surface-tint": "#006d2f",
|
||||
"on-secondary-container": "#006f64",
|
||||
"secondary-fixed": "#8ff4e3",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"background": "#f3fcef",
|
||||
"on-primary-fixed": "#002109",
|
||||
"surface-container": "#e7f1e4",
|
||||
"on-primary-fixed-dim": "#3de273",
|
||||
"surface-dim": "#d3ddd0",
|
||||
"status-error": "#EF4444",
|
||||
"primary-fixed": "#66ff8e",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#151e16",
|
||||
"on-tertiary-fixed": "#380d00",
|
||||
"surface-bright": "#f3fcef",
|
||||
"secondary-fixed-dim": "#72d8c8",
|
||||
"on-surface": "#151e16",
|
||||
"on-surface-variant": "#3c4a3d",
|
||||
"on-tertiary-fixed-variant": "#763319",
|
||||
"surface-card": "#FFFFFF",
|
||||
"border-subtle": "#E2E8F0",
|
||||
"on-primary-container": "#005523",
|
||||
"primary": "#006d2f",
|
||||
"background-main": "#F8F9FA",
|
||||
"status-warning": "#F59E0B",
|
||||
"on-secondary-fixed-variant": "#005047",
|
||||
"status-info": "#3B82F6",
|
||||
"secondary": "#006b5f",
|
||||
"text-primary": "#1A1C1E",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#3de273",
|
||||
"primary-container": "#25d366",
|
||||
"inverse-on-surface": "#eaf3e6",
|
||||
"on-primary-fixed-variant": "#005322",
|
||||
"tertiary-fixed": "#ffdbcf",
|
||||
"text-secondary": "#64748B",
|
||||
"tertiary-container": "#ffa07e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "24px",
|
||||
"toolbar-height": "64px",
|
||||
"container-margin": "32px",
|
||||
"base": "8px",
|
||||
"card-padding": "20px",
|
||||
"sidebar-width": "260px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"mono-code": ["JetBrains Mono"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"title-sm": ["Plus Jakarta Sans"]
|
||||
},
|
||||
"fontSize": {
|
||||
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-main text-on-surface antialiased">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-sidebar-width bg-surface-card border-r border-outline-variant shadow-sm flex flex-col py-6 px-4 gap-2 z-50">
|
||||
<div class="mb-8 px-4">
|
||||
<h1 class="text-headline-md font-headline-md font-extrabold text-primary">WA Business</h1>
|
||||
<p class="text-body-sm font-body-sm text-on-surface-variant">Enterprise API</p>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 bg-primary-container text-on-primary-container rounded-lg px-4 py-2 active:scale-95 transition-transform duration-150" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="text-label-caps font-label-caps">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
<span class="text-label-caps font-label-caps">Conversations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="text-label-caps font-label-caps">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
||||
<span class="text-label-caps font-label-caps">Webhooks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all active:scale-95 duration-150" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
<span class="text-label-caps font-label-caps">Analytics</span>
|
||||
</a>
|
||||
</nav>
|
||||
<button class="mt-4 bg-primary text-on-primary font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 hover:opacity-90 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
New Message
|
||||
</button>
|
||||
<div class="mt-auto flex flex-col gap-1 border-t border-outline-variant pt-4">
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-label-caps font-label-caps">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-container-low transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span class="text-label-caps font-label-caps">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-sidebar-width flex-1 min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center h-toolbar-height px-container-margin w-full sticky top-0 z-40 bg-surface shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-title-sm font-headline-md font-bold text-primary">Dashboard Overview</h2>
|
||||
<div class="flex bg-surface-container rounded-full p-1 border border-outline-variant ml-4">
|
||||
<button class="px-3 py-1 rounded-full text-label-caps font-bold bg-white text-primary shadow-sm">EN</button>
|
||||
<button class="px-3 py-1 rounded-full text-label-caps text-on-surface-variant hover:text-on-surface transition-colors">ID</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="search">search</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="notifications">notifications</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:bg-surface-container-high p-2 rounded-full transition-colors" data-icon="help">help</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-outline-variant">
|
||||
<div class="text-right">
|
||||
<p class="text-body-sm font-bold text-on-surface">Admin User</p>
|
||||
<p class="text-[10px] text-on-surface-variant font-label-caps">SUPER ADMIN</p>
|
||||
</div>
|
||||
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border border-primary p-0.5" data-alt="A professional close-up portrait of a corporate executive for a profile picture. The lighting is soft and natural from the side, creating a clean and professional look against a neutral, minimal office background. The color palette is composed of soft whites, light greys, and a touch of corporate green to align with the enterprise dashboard aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCp0ie69-lECYALXnSCAg1z51btPqCIjcLum71vco0plU3syX8gJfTXv0uBcmXsvoKoapQJ2nxF46ffjsSbSskw2jQUDkJ7TjJDuytn3hUZokLRUPn8CSPzOjvhlJ4B42rJuRWG8ZT0YQbwPKZHc1kIYCLIIVsDO8trpb7Uvi7euAeGBl9poQRj3TqTRbwWgsVo7NIKo_f4C3vIB0zg2vm_QA7Ukd28O-lG47bIAphhoqzMemMN4bAiYU9iEBrCz4buQbKTKatZ_VI"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-container-margin grid grid-cols-12 gap-gutter">
|
||||
<!-- KPI Cards -->
|
||||
<div class="col-span-12 grid grid-cols-4 gap-gutter">
|
||||
<!-- Total Messages -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-label-caps font-label-caps text-on-surface-variant">TOTAL MESSAGES</span>
|
||||
<span class="bg-primary-container/20 text-primary p-1.5 rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mt-2">
|
||||
<h3 class="text-display-lg font-display-lg text-on-surface">1.2M</h3>
|
||||
<span class="text-status-success text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span> 12%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant">vs last 30 days</p>
|
||||
</div>
|
||||
<!-- Delivered -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-label-caps font-label-caps text-on-surface-variant">DELIVERED</span>
|
||||
<span class="bg-secondary-container/30 text-secondary p-1.5 rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="done_all">done_all</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mt-2">
|
||||
<h3 class="text-display-lg font-display-lg text-on-surface">98.4%</h3>
|
||||
<span class="text-status-success text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span> 0.5%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant">1,180,800 messages</p>
|
||||
</div>
|
||||
<!-- Read -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-label-caps font-label-caps text-on-surface-variant">READ RATE</span>
|
||||
<span class="bg-tertiary-container/20 text-tertiary p-1.5 rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mt-2">
|
||||
<h3 class="text-display-lg font-display-lg text-on-surface">76.2%</h3>
|
||||
<span class="text-status-error text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_down">trending_down</span> 2%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant">914,400 read</p>
|
||||
</div>
|
||||
<!-- Failed -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-2">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-label-caps font-label-caps text-on-surface-variant">FAILED</span>
|
||||
<span class="bg-error-container/40 text-error p-1.5 rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="error">error</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mt-2">
|
||||
<h3 class="text-display-lg font-display-lg text-on-surface">1.6%</h3>
|
||||
<span class="text-on-surface-variant text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="remove">remove</span> 0%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant">19,200 errors</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Charts Row -->
|
||||
<div class="col-span-8 flex flex-col gap-gutter">
|
||||
<!-- Volume Chart -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant h-[400px] flex flex-col">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-title-sm font-headline-md text-on-surface">Message Volume (Last 7 Days)</h3>
|
||||
<select class="bg-surface-container border-none rounded-lg text-body-sm font-bold py-1 px-3 focus:ring-primary">
|
||||
<option>Daily</option>
|
||||
<option>Hourly</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 w-full relative group">
|
||||
<!-- Simulated Line Chart with CSS Gradients/Shapes -->
|
||||
<div class="absolute inset-0 flex items-end justify-between px-4 pb-8">
|
||||
<div class="h-[60%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">MON</div></div>
|
||||
<div class="h-[75%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">TUE</div></div>
|
||||
<div class="h-[65%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">WED</div></div>
|
||||
<div class="h-[90%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">THU</div></div>
|
||||
<div class="h-[80%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">FRI</div></div>
|
||||
<div class="h-[40%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">SAT</div></div>
|
||||
<div class="h-[35%] w-0.5 bg-outline-variant/30 relative"><div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-label-caps">SUN</div></div>
|
||||
</div>
|
||||
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 800 300">
|
||||
<defs>
|
||||
<lineargradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stop-color="#25D366" stop-opacity="0.3"></stop>
|
||||
<stop offset="100%" stop-color="#25D366" stop-opacity="0"></stop>
|
||||
</lineargradient>
|
||||
</defs>
|
||||
<path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180 V300 H0 Z" fill="url(#chartGradient)"></path>
|
||||
<path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180" fill="none" stroke="#25D366" stroke-linecap="round" stroke-width="4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Campaigns Table -->
|
||||
<div class="bg-surface-card rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant overflow-hidden">
|
||||
<div class="px-card-padding py-4 border-b border-outline-variant flex justify-between items-center">
|
||||
<h3 class="text-title-sm font-headline-md text-on-surface">Recent Campaigns</h3>
|
||||
<button class="text-primary text-body-sm font-bold hover:underline">View All</button>
|
||||
</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-surface-container-low text-on-surface-variant">
|
||||
<tr>
|
||||
<th class="px-card-padding py-3 text-label-caps font-label-caps">CAMPAIGN NAME</th>
|
||||
<th class="px-card-padding py-3 text-label-caps font-label-caps">AUDIENCE</th>
|
||||
<th class="px-card-padding py-3 text-label-caps font-label-caps">STATUS</th>
|
||||
<th class="px-card-padding py-3 text-label-caps font-label-caps">DELIVERY</th>
|
||||
<th class="px-card-padding py-3 text-label-caps font-label-caps">DATE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/30">
|
||||
<tr class="hover:bg-surface-container-lowest transition-colors">
|
||||
<td class="px-card-padding py-4 text-body-sm font-bold">Summer Flash Sale #4</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">45,200 users</td>
|
||||
<td class="px-card-padding py-4">
|
||||
<span class="bg-status-success/10 text-status-success px-2 py-1 rounded-full text-[10px] font-bold">SENT</span>
|
||||
</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">99.2%</td>
|
||||
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Oct 24, 2023</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-lowest transition-colors">
|
||||
<td class="px-card-padding py-4 text-body-sm font-bold">Member Newsletter Oct</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">12,800 users</td>
|
||||
<td class="px-card-padding py-4">
|
||||
<span class="bg-status-info/10 text-status-info px-2 py-1 rounded-full text-[10px] font-bold">SCHEDULED</span>
|
||||
</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">--</td>
|
||||
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Oct 28, 2023</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-lowest transition-colors">
|
||||
<td class="px-card-padding py-4 text-body-sm font-bold">Product Launch Beta</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">800 users</td>
|
||||
<td class="px-card-padding py-4">
|
||||
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded-full text-[10px] font-bold">DRAFT</span>
|
||||
</td>
|
||||
<td class="px-card-padding py-4 text-body-sm">--</td>
|
||||
<td class="px-card-padding py-4 text-body-sm text-on-surface-variant">Nov 02, 2023</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Sidebar / Secondary Info -->
|
||||
<div class="col-span-4 flex flex-col gap-gutter">
|
||||
<!-- Delivery Funnel -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant flex flex-col gap-6">
|
||||
<h3 class="text-title-sm font-headline-md text-on-surface">Delivery Funnel</h3>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-body-sm font-bold">Sent</span>
|
||||
<span class="text-body-sm text-on-surface-variant">1,200,000</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ml-4">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-body-sm font-bold">Delivered</span>
|
||||
<span class="text-body-sm text-on-surface-variant">1,180,800 (98.4%)</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary/80 w-[98%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ml-8">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-body-sm font-bold">Read</span>
|
||||
<span class="text-body-sm text-on-surface-variant">914,400 (76.2%)</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary/60 w-[76%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ml-12">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-body-sm font-bold">Replied</span>
|
||||
<span class="text-body-sm text-on-surface-variant">216,000 (18%)</span>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary/40 w-[18%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Webhook Health Panel -->
|
||||
<div class="bg-inverse-surface text-on-primary p-card-padding rounded-xl shadow-lg flex flex-col gap-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="terminal">terminal</span>
|
||||
<h3 class="text-title-sm font-headline-md">Webhook Health</h3>
|
||||
</div>
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-status-success opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-status-success"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bg-on-surface/10 rounded-lg p-3 border border-outline/20">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-label-caps opacity-70">ENDPOINT</span>
|
||||
<span class="text-label-caps text-status-success">LIVE</span>
|
||||
</div>
|
||||
<code class="text-mono-code font-mono-code block truncate opacity-90">https://api.acme.corp/v1/wh/whatsapp</code>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm opacity-80">Avg. Response Time</span>
|
||||
<span class="text-body-sm font-bold">142ms</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm opacity-80">Success Rate</span>
|
||||
<span class="text-body-sm font-bold">99.98%</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm opacity-80">Pending Payloads</span>
|
||||
<span class="text-body-sm font-bold">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-2 py-2 border border-outline-variant/30 rounded-lg text-label-caps font-bold hover:bg-white/5 transition-colors">
|
||||
VIEW DEBUG LOGS
|
||||
</button>
|
||||
</div>
|
||||
<!-- System Messages -->
|
||||
<div class="bg-surface-card p-card-padding rounded-xl shadow-sm border border-outline-variant flex flex-col gap-3">
|
||||
<h3 class="text-label-caps font-label-caps text-on-surface-variant">SYSTEM ALERTS</h3>
|
||||
<div class="flex gap-3 p-3 bg-error-container/20 rounded-lg border-l-4 border-error">
|
||||
<span class="material-symbols-outlined text-error" data-icon="warning">warning</span>
|
||||
<div>
|
||||
<p class="text-body-sm font-bold text-on-error-container">Credit Low Alert</p>
|
||||
<p class="text-[12px] text-on-error-container/80">Balance is below $50.00. Top up soon to avoid interruption.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 p-3 bg-surface-container rounded-lg border-l-4 border-primary">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
|
||||
<div>
|
||||
<p class="text-body-sm font-bold text-on-surface">New Feature</p>
|
||||
<p class="text-[12px] text-on-surface-variant">Multi-device authentication is now available for all business accounts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
400
stitch_bizone/draft_editor_whatsapp_business_admin/code.html
Normal file
400
stitch_bizone/draft_editor_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,400 @@
|
||||
<!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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-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 & 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
Normal file
BIN
stitch_bizone/draft_editor_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
211
stitch_bizone/login_whatsapp_business_admin/code.html
Normal file
211
stitch_bizone/login_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Login - 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&family=Inter:wght@400;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
</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">
|
||||
<!-- 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">
|
||||
<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">
|
||||
<h1 class="font-headline-md text-headline-md text-on-background">WhatsApp Business Admin</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Manage your enterprise communication flow</p>
|
||||
</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">
|
||||
<form action="#" class="flex flex-col gap-6" method="POST">
|
||||
<!-- Email Field -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant" for="email">EMAIL ADDRESS</label>
|
||||
<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="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"/>
|
||||
</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>
|
||||
</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"/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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"/>
|
||||
<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>
|
||||
</form>
|
||||
<!-- Divider -->
|
||||
<div class="relative flex items-center py-2">
|
||||
<div class="flex-grow border-t border-outline-variant"></div>
|
||||
<span class="flex-shrink mx-4 font-label-caps text-label-caps text-outline">OR ACCESS VIA</span>
|
||||
<div class="flex-grow border-t border-outline-variant"></div>
|
||||
</div>
|
||||
<!-- Single Sign On -->
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">TERMS OF SERVICE</a>
|
||||
<a class="font-label-caps text-label-caps text-outline hover:text-on-surface-variant transition-colors" href="#">HELP CENTER</a>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Visual Background Element (Subtle) -->
|
||||
<div class="fixed top-0 right-0 p-12 -z-10 opacity-10 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/login_whatsapp_business_admin/screen.png
Normal file
BIN
stitch_bizone/login_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
512
stitch_bizone/messages_drafts_whatsapp_business_admin/code.html
Normal file
512
stitch_bizone/messages_drafts_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,512 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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
Normal file
BIN
stitch_bizone/messages_drafts_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 KiB |
@ -0,0 +1,481 @@
|
||||
<!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 & 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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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 & 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 & 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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>WhatsApp Business Admin Console - Activity Logs</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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 & 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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
405
stitch_bizone/template_builder_whatsapp_business_admin/code.html
Normal file
405
stitch_bizone/template_builder_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,405 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface": "#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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
392
stitch_bizone/template_list_whatsapp_business_admin/code.html
Normal file
392
stitch_bizone/template_list_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,392 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-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
Normal file
BIN
stitch_bizone/template_list_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
464
stitch_bizone/users_roles_whatsapp_business_admin/code.html
Normal file
464
stitch_bizone/users_roles_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,464 @@
|
||||
<!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&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<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
Normal file
BIN
stitch_bizone/users_roles_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
421
stitch_bizone/webhook_logs_whatsapp_business_admin/code.html
Normal file
421
stitch_bizone/webhook_logs_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,421 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Webhook Logs & Activity Monitor</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface": "#f3fcef",
|
||||
"background": "#f3fcef",
|
||||
"text-primary": "#1A1C1E",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-container": "#006f64",
|
||||
"tertiary": "#93492e",
|
||||
"status-success": "#25D366",
|
||||
"surface-card": "#FFFFFF",
|
||||
"secondary-fixed-dim": "#72d8c8",
|
||||
"primary": "#006d2f",
|
||||
"on-secondary-fixed-variant": "#005047",
|
||||
"surface-container-low": "#edf6e9",
|
||||
"status-warning": "#F59E0B",
|
||||
"surface-variant": "#dce5d8",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container": "#e7f1e4",
|
||||
"primary-fixed-dim": "#3de273",
|
||||
"on-primary-fixed": "#002109",
|
||||
"status-info": "#3B82F6",
|
||||
"on-tertiary-fixed-variant": "#763319",
|
||||
"surface-dim": "#d3ddd0",
|
||||
"surface-container-high": "#e2ebde",
|
||||
"status-error": "#EF4444",
|
||||
"border-subtle": "#E2E8F0",
|
||||
"primary-container": "#25d366",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-tint": "#006d2f",
|
||||
"on-tertiary-fixed": "#380d00",
|
||||
"on-surface-variant": "#3c4a3d",
|
||||
"on-tertiary-container": "#78351b",
|
||||
"secondary-fixed": "#8ff4e3",
|
||||
"on-primary-fixed-variant": "#005322",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-fixed": "#ffdbcf",
|
||||
"on-background": "#151e16",
|
||||
"surface-bright": "#f3fcef",
|
||||
"error": "#ba1a1a",
|
||||
"secondary": "#006b5f",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#ffa07e",
|
||||
"on-error-container": "#93000a",
|
||||
"background-main": "#F8F9FA",
|
||||
"on-surface": "#151e16",
|
||||
"inverse-primary": "#3de273",
|
||||
"inverse-surface": "#2a332a",
|
||||
"on-error": "#ffffff",
|
||||
"outline": "#6c7b6b",
|
||||
"inverse-on-surface": "#eaf3e6",
|
||||
"text-secondary": "#64748B",
|
||||
"on-primary-container": "#005523",
|
||||
"tertiary-fixed-dim": "#ffb59b",
|
||||
"outline-variant": "#bbcbb9",
|
||||
"surface-container-highest": "#dce5d8",
|
||||
"primary-fixed": "#66ff8e",
|
||||
"secondary-container": "#8cf1e1",
|
||||
"on-secondary-fixed": "#00201c"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"sidebar-width": "260px",
|
||||
"toolbar-height": "64px",
|
||||
"gutter": "24px",
|
||||
"container-margin": "32px",
|
||||
"base": "8px",
|
||||
"card-padding": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"mono-code": ["JetBrains Mono"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"title-sm": ["Plus Jakarta Sans"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"body-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #f3fcef;
|
||||
}
|
||||
.payload-scrollbar::-webkit-scrollbar { width: 6px; }
|
||||
.payload-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.payload-scrollbar::-webkit-scrollbar-thumb { background: #dce5d8; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-background">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest shadow-sm flex flex-col py-6 px-4 z-50">
|
||||
<div class="mb-10 px-2">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-body-md">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
||||
<span class="font-body-md">Conversations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
||||
<span class="font-body-md">Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-body-md">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-container-low text-primary font-bold" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="webhook">webhook</span>
|
||||
<span class="font-body-md">Webhooks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
<span class="font-body-md">Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-body-md">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-6 border-t border-surface-variant space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
<span class="font-body-md">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors hover:bg-surface-container-low text-on-surface-variant" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span class="font-body-md">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter z-40">
|
||||
<div class="flex items-center gap-6">
|
||||
<h2 class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</h2>
|
||||
<div class="relative w-64">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
|
||||
<input class="w-full bg-surface-container-low border-none rounded-full py-1.5 pl-10 pr-4 text-body-sm focus:ring-1 focus:ring-primary" placeholder="Search logs..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all">notifications</button>
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-all">settings</button>
|
||||
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border border-surface-variant">
|
||||
<img alt="Admin Avatar" class="h-full w-full object-cover" data-alt="A professional close-up portrait of a tech executive in a brightly lit, modern office environment. The subject is a male with a warm, confident expression. The lighting is soft and natural, emphasizing a clean, corporate light-mode aesthetic. High-quality digital photography style with a shallow depth of field, highlighting the person against a soft-focus background of minimalist office architecture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAsJ5W6DHarWIMuT2aRvfxJ-W1V6nrxi69aEnLXiRAXBallSf4nClHfd3IkdnJIEC74DoRdzi0qBra-C1QBbKjONLQ_p41IZs07OyHqxT3Y4DP7NEws7ih1NuqxnfTMsBDBwPdQ1kSAVKMTR5qUgdoNBCANnw2Y1NuAkEP1TEXFtRQoZ3mMHyt61Fdrorxnc1RQZVjiTeoQh07wz381wRpU2mEcFehyEBwlgl_NNNXBExSiHW_uAweJcGkwQ8y93WZqmUesLzqiszM"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-[260px] pt-[64px] min-h-screen p-container-margin bg-background">
|
||||
<!-- Dashboard Header & Stats -->
|
||||
<div class="mb-8 flex justify-between items-end">
|
||||
<div>
|
||||
<h3 class="font-display-lg text-display-lg text-on-surface mb-2">Webhook Logs</h3>
|
||||
<p class="text-on-surface-variant font-body-md">Real-time monitoring of incoming and outgoing events.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 bg-surface-container-highest px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-variant transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
<span class="font-label-caps text-label-caps">Filter Events</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded-lg hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
<span class="font-label-caps text-label-caps">Export Logs</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid for Stats -->
|
||||
<div class="grid grid-cols-12 gap-6 mb-8">
|
||||
<!-- Success Rate Card -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant">SUCCESS RATE</span>
|
||||
<span class="material-symbols-outlined text-status-success">check_circle</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lg text-display-lg text-on-surface">99.8%</span>
|
||||
<span class="text-status-success text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_upward</span>
|
||||
0.2%
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-status-success" style="width: 99.8%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Average Latency Card -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant">AVG. RESPONSE TIME</span>
|
||||
<span class="material-symbols-outlined text-status-info">speed</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lg text-display-lg text-on-surface">142ms</span>
|
||||
<span class="text-status-success text-body-sm font-bold flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
|
||||
12ms
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-status-info" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Total Events Card -->
|
||||
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-surface-variant">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant">TOTAL EVENTS (24H)</span>
|
||||
<span class="material-symbols-outlined text-on-tertiary-container">history</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lg text-display-lg text-on-surface">1,248,302</span>
|
||||
</div>
|
||||
<p class="mt-4 text-on-surface-variant text-body-sm">Peak load: 4.2k req/sec</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Logs Table and JSON Viewer Container -->
|
||||
<div class="flex gap-6 items-start">
|
||||
<!-- Webhook Logs List -->
|
||||
<div class="flex-1 bg-surface-container-lowest rounded-xl shadow-sm border border-surface-variant overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-surface-variant flex justify-between items-center bg-surface-container-low/30">
|
||||
<span class="font-title-sm text-title-sm text-on-surface">Activity Monitor</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-status-success animate-pulse"></span>
|
||||
<span class="font-label-caps text-label-caps text-status-success">LIVE UPDATING</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low border-b border-surface-variant">
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">TIMESTAMP</th>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">EVENT TYPE</th>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">LATENCY</th>
|
||||
<th class="px-6 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-surface-variant">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:45.102</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">128ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group bg-surface-container-low/20">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:44.850</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.delivered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">92ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: Error Example -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:42.311</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.read</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-error/10 text-status-error">400 Error</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">215ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:40.004</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">154ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:38.992</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.sent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">133ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 6 -->
|
||||
<tr class="hover:bg-surface-container transition-colors cursor-pointer group">
|
||||
<td class="px-6 py-4 font-mono-code text-mono-code text-on-surface-variant whitespace-nowrap">2023-11-24 14:02:37.450</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="font-mono-code text-mono-code text-primary font-bold">message.delivered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-status-success/10 text-status-success">200 OK</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-mono-code text-mono-code text-on-surface-variant">110ms</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="material-symbols-outlined text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-3 border-t border-surface-variant bg-surface-container-low/20 flex justify-between items-center">
|
||||
<span class="text-body-sm text-on-surface-variant">Showing 1-50 of 1,248,302 logs</span>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 bg-surface-container-lowest border border-surface-variant rounded text-body-sm disabled:opacity-50" disabled="">Previous</button>
|
||||
<button class="px-3 py-1 bg-surface-container-lowest border border-surface-variant rounded text-body-sm hover:bg-surface-container transition-colors">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Webhook Payload Viewer (Side Drawer) -->
|
||||
<div class="w-[450px] sticky top-[96px] bg-surface-container-lowest rounded-xl shadow-lg border border-surface-variant flex flex-col h-[calc(100vh-160px)]">
|
||||
<div class="p-6 border-b border-surface-variant flex justify-between items-center">
|
||||
<div>
|
||||
<h4 class="font-title-sm text-title-sm text-on-surface">Payload Viewer</h4>
|
||||
<p class="text-xs text-on-surface-variant font-mono-code">Event: 562ea1...3b21</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="material-symbols-outlined p-1 rounded hover:bg-surface-container transition-colors text-on-surface-variant">content_copy</button>
|
||||
<button class="material-symbols-outlined p-1 rounded hover:bg-surface-container transition-colors text-on-surface-variant">close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-6 bg-surface-container-low font-mono-code text-mono-code payload-scrollbar">
|
||||
<pre class="text-on-secondary-fixed-variant whitespace-pre-wrap"><span class="text-tertiary">{</span>
|
||||
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"ev_123456789"</span>,
|
||||
<span class="text-primary-container">"object"</span>: <span class="text-tertiary-container">"event"</span>,
|
||||
<span class="text-primary-container">"api_version"</span>: <span class="text-tertiary-container">"2023-11"</span>,
|
||||
<span class="text-primary-container">"created"</span>: <span class="text-tertiary-container">1700834565</span>,
|
||||
<span class="text-primary-container">"data"</span>: <span class="text-tertiary">{</span>
|
||||
<span class="text-primary-container">"object"</span>: <span class="text-tertiary-container">{</span>
|
||||
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"msg_abc123"</span>,
|
||||
<span class="text-primary-container">"to"</span>: <span class="text-tertiary-container">"+1234567890"</span>,
|
||||
<span class="text-primary-container">"status"</span>: <span class="text-tertiary-container">"sent"</span>,
|
||||
<span class="text-primary-container">"timestamp"</span>: <span class="text-tertiary-container">"1700834564"</span>,
|
||||
<span class="text-primary-container">"context"</span>: <span class="text-tertiary">{</span>
|
||||
<span class="text-primary-container">"from"</span>: <span class="text-tertiary-container">"+1098765432"</span>,
|
||||
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"whatsapp_biz_001"</span>
|
||||
<span class="text-tertiary">}</span>
|
||||
<span class="text-tertiary">}</span>
|
||||
<span class="text-tertiary">}</span>,
|
||||
<span class="text-primary-container">"type"</span>: <span class="text-tertiary-container">"message.sent"</span>,
|
||||
<span class="text-primary-container">"request"</span>: <span class="text-tertiary">{</span>
|
||||
<span class="text-primary-container">"id"</span>: <span class="text-tertiary-container">"req_987654321"</span>,
|
||||
<span class="text-primary-container">"idempotency_key"</span>: <span class="text-tertiary-container">"550e8400-e29b-41d4-a716-446655440000"</span>
|
||||
<span class="text-tertiary">}</span>
|
||||
<span class="text-tertiary">}</span></pre>
|
||||
</div>
|
||||
<div class="p-4 border-t border-surface-variant flex flex-col gap-2">
|
||||
<div class="flex justify-between items-center text-xs">
|
||||
<span class="text-on-surface-variant uppercase font-bold tracking-wider">RESPONSE PAYLOAD</span>
|
||||
<span class="text-status-success font-bold">200 OK</span>
|
||||
</div>
|
||||
<div class="bg-surface-dim/30 rounded p-3 font-mono-code text-xs text-on-surface">
|
||||
{ "status": "success", "received": true }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
stitch_bizone/webhook_logs_whatsapp_business_admin/screen.png
Normal file
BIN
stitch_bizone/webhook_logs_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
163
stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md
Normal file
163
stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md
Normal file
@ -0,0 +1,163 @@
|
||||
---
|
||||
name: WhatsApp Business Admin Dashboard System
|
||||
colors:
|
||||
surface: '#f3fcef'
|
||||
surface-dim: '#d3ddd0'
|
||||
surface-bright: '#f3fcef'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#edf6e9'
|
||||
surface-container: '#e7f1e4'
|
||||
surface-container-high: '#e2ebde'
|
||||
surface-container-highest: '#dce5d8'
|
||||
on-surface: '#151e16'
|
||||
on-surface-variant: '#3c4a3d'
|
||||
inverse-surface: '#2a332a'
|
||||
inverse-on-surface: '#eaf3e6'
|
||||
outline: '#6c7b6b'
|
||||
outline-variant: '#bbcbb9'
|
||||
surface-tint: '#006d2f'
|
||||
primary: '#006d2f'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#25d366'
|
||||
on-primary-container: '#005523'
|
||||
inverse-primary: '#3de273'
|
||||
secondary: '#006b5f'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#8cf1e1'
|
||||
on-secondary-container: '#006f64'
|
||||
tertiary: '#93492e'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#ffa07e'
|
||||
on-tertiary-container: '#78351b'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#66ff8e'
|
||||
primary-fixed-dim: '#3de273'
|
||||
on-primary-fixed: '#002109'
|
||||
on-primary-fixed-variant: '#005322'
|
||||
secondary-fixed: '#8ff4e3'
|
||||
secondary-fixed-dim: '#72d8c8'
|
||||
on-secondary-fixed: '#00201c'
|
||||
on-secondary-fixed-variant: '#005047'
|
||||
tertiary-fixed: '#ffdbcf'
|
||||
tertiary-fixed-dim: '#ffb59b'
|
||||
on-tertiary-fixed: '#380d00'
|
||||
on-tertiary-fixed-variant: '#763319'
|
||||
background: '#f3fcef'
|
||||
on-background: '#151e16'
|
||||
surface-variant: '#dce5d8'
|
||||
background-main: '#F8F9FA'
|
||||
surface-card: '#FFFFFF'
|
||||
text-primary: '#1A1C1E'
|
||||
text-secondary: '#64748B'
|
||||
border-subtle: '#E2E8F0'
|
||||
status-success: '#25D366'
|
||||
status-warning: '#F59E0B'
|
||||
status-error: '#EF4444'
|
||||
status-info: '#3B82F6'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 32px
|
||||
fontWeight: '700'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: 32px
|
||||
letterSpacing: -0.01em
|
||||
title-sm:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-caps:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
mono-code:
|
||||
fontFamily: jetbrainsMono
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
base: 8px
|
||||
container-margin: 32px
|
||||
gutter: 24px
|
||||
card-padding: 20px
|
||||
toolbar-height: 64px
|
||||
sidebar-width: 260px
|
||||
---
|
||||
|
||||
# Figma Design Brief
|
||||
|
||||
Design a modern enterprise SaaS admin dashboard for a WhatsApp Business management platform.
|
||||
|
||||
## Style Direction
|
||||
- Clean, premium, modern
|
||||
- WhatsApp-inspired green accent
|
||||
- White cards
|
||||
- Light gray background
|
||||
- Rounded corners
|
||||
- Soft shadows
|
||||
- Typography: Inter or Plus Jakarta Sans
|
||||
|
||||
## Required Pages
|
||||
1. Login
|
||||
2. Dashboard Overview
|
||||
3. Contacts List
|
||||
4. Contact Detail
|
||||
5. Conversations Inbox
|
||||
6. Messages List
|
||||
7. Draft Messages
|
||||
8. Draft Editor
|
||||
9. Campaign List
|
||||
10. Campaign Detail
|
||||
11. Template List
|
||||
12. Template Builder
|
||||
13. Settings Overview
|
||||
14. WhatsApp API Settings
|
||||
15. Webhook Settings
|
||||
16. Webhook Logs
|
||||
17. Users Management
|
||||
18. Roles and Permissions
|
||||
19. Activity Logs
|
||||
20. Queue Monitor
|
||||
|
||||
## Required Components
|
||||
- Left sidebar navigation
|
||||
- Top header
|
||||
- KPI cards
|
||||
- Charts
|
||||
- Data tables
|
||||
- Status badges
|
||||
- Filters
|
||||
- Mobile message preview
|
||||
- Webhook payload viewer drawer
|
||||
- Queue monitor widgets
|
||||
|
||||
## Tone
|
||||
Professional, scalable, operational, suitable for internal business teams.
|
||||
Reference in New Issue
Block a user