chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
306
screen_design/connect_channel_super_admin/code.html
Normal file
306
screen_design/connect_channel_super_admin/code.html
Normal file
@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Connect Channel - ZappCare</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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": {
|
||||
"tertiary": "#865219",
|
||||
"primary": "#0c6780",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"secondary": "#35637d",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-primary": "#ffffff",
|
||||
"on-background": "#191c1e",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline": "#6f787d",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"error": "#ba1a1a",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary-container": "#005870",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-container": "#87ceeb",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.headline-font { font-family: 'Manrope', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(247, 249, 252, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface min-h-screen">
|
||||
<!-- SideNavBar Integration -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-800 flex flex-col p-4 space-y-2">
|
||||
<div class="flex items-center px-4 mb-8">
|
||||
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center mr-3 shadow-lg">
|
||||
<span class="material-symbols-outlined text-white" data-icon="hub">hub</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Super Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||||
<span>Tenants</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
<span>Channels</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="payments">payments</span>
|
||||
<span>Billing</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
|
||||
<span>Audit Log</span>
|
||||
</a>
|
||||
<a class="flex items-center space-x-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-4 mt-auto border-t border-outline-variant/15">
|
||||
<div class="flex items-center p-2 rounded-xl bg-white/30">
|
||||
<img class="w-10 h-10 rounded-full object-cover" data-alt="professional corporate headshot of a male super admin with a friendly expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCga1hNvEWt1vnbzVsQDIzjdHsfjvfndxdc_2C0326_5q92dtNHacKoO6ChsYlfVR0vAfTjTHhE9Z2P6wKoRGq2MOIIbKZapb7WGmyyDCqy_4Gkc8V68xqnetkBKs9RNv1Pqw7YTkQZpbAzKWc1CSj6BOkUMBUaHaN7xmtnJGXtJes8blLJF4qdhrzrJKNoe_Ido7Dck97P3Y-5j9qeOMFZ1FTbwOtFcuy_4BdqstQmtfHs1JOrdCgszVsj5dsCeAV82rqoWw1wbWA"/>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-bold text-on-surface">Alex Rivera</p>
|
||||
<p class="text-xs text-slate-500">Super Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Integration -->
|
||||
<header class="fixed top-0 left-64 right-0 z-40 bg-[#f7f9fc]/85 backdrop-blur-md flex justify-between items-center px-8 py-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-slate-400 font-medium">Channels</span>
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">chevron_right</span>
|
||||
<span class="text-primary font-bold">Connect WhatsApp Business</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-[#f2f4f6] rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-[#f2f4f6] rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-24 p-8 min-h-screen">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-10">
|
||||
<h2 class="headline-font text-4xl font-extrabold text-on-surface tracking-tight mb-2">Connect New Channel</h2>
|
||||
<p class="text-on-surface-variant max-w-2xl leading-relaxed">
|
||||
Integrate a new WhatsApp Business API account into a tenant's ecosystem. Ensure all IDs match your provider's dashboard for successful verification.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Bento Grid Layout for Form -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Left Column: Primary Config -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<!-- Core Configuration Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center space-x-3 mb-8">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="settings_input_component">settings_input_component</span>
|
||||
<h3 class="headline-font text-xl font-bold">Account Identities</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
|
||||
<!-- Tenant Selection -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Assign to Tenant</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface transition-all appearance-none">
|
||||
<option>Global Healthcare Solutions</option>
|
||||
<option>Apex Logistics Group</option>
|
||||
<option>North Star Retail</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Provider Selection -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Business Provider</label>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface transition-all appearance-none">
|
||||
<option>Meta Cloud API</option>
|
||||
<option>360Dialog</option>
|
||||
<option>Twilio</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WABA ID -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">WABA ID</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="e.g. 104593827105" type="text"/>
|
||||
</div>
|
||||
<!-- Phone Number ID -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Phone Number ID</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="e.g. 293847562019" type="text"/>
|
||||
</div>
|
||||
<!-- Display Number -->
|
||||
<div class="space-y-1.5 md:col-span-2">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Display Phone Number</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface placeholder:text-slate-400" placeholder="+1 (555) 000-0000" type="tel"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Webhook Config Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-8 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.04)]">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="webhook">webhook</span>
|
||||
<h3 class="headline-font text-xl font-bold">Webhook Configuration</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-xs font-bold rounded-full uppercase tracking-wider">Production</span>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Callback URL</label>
|
||||
<div class="flex">
|
||||
<input class="flex-1 bg-surface-container-low border-none rounded-l-lg px-4 py-3.5 text-slate-500 font-mono text-sm" readonly="" type="text" value="https://api.zappcare.com/v1/webhooks/whatsapp"/>
|
||||
<button class="bg-surface-container-highest px-4 rounded-r-lg hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-600 text-lg">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-semibold text-on-surface-variant ml-1">Verify Token</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-lg px-4 py-3.5 focus:ring-2 focus:ring-primary text-on-surface" type="password" value="••••••••••••••••"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Status & Info -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||
<!-- Helper Card -->
|
||||
<div class="bg-primary p-8 rounded-xl text-white relative overflow-hidden group">
|
||||
<div class="relative z-10">
|
||||
<h4 class="headline-font text-xl font-bold mb-4">Documentation</h4>
|
||||
<p class="text-primary-container text-sm leading-relaxed mb-6">
|
||||
Not sure where to find your WABA ID or Phone Number ID? Check our Meta Cloud API integration guide for step-by-step instructions.
|
||||
</p>
|
||||
<a class="inline-flex items-center font-bold text-white group-hover:underline" href="#">
|
||||
View Guide
|
||||
<span class="material-symbols-outlined ml-2 text-sm">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Abstract Background Decoration -->
|
||||
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary-container/20 rounded-full blur-3xl transition-transform group-hover:scale-150 duration-500"></div>
|
||||
</div>
|
||||
<!-- Connection Status Panel -->
|
||||
<div class="bg-surface-container-low border border-outline-variant/15 rounded-xl p-6">
|
||||
<h4 class="text-sm font-bold text-on-surface-variant uppercase tracking-widest mb-4">Step-by-Step Status</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center space-x-3 text-sm">
|
||||
<span class="material-symbols-outlined text-primary text-lg" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="font-medium">Tenant Selected</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-3 text-sm text-slate-400">
|
||||
<span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
|
||||
<span>Provider Authenticated</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-3 text-sm text-slate-400">
|
||||
<span class="material-symbols-outlined text-lg">radio_button_unchecked</span>
|
||||
<span>Webhook Handshake</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Visual Accent Card -->
|
||||
<div class="rounded-xl overflow-hidden h-48 relative">
|
||||
<img class="w-full h-full object-cover" data-alt="abstract artistic visualization of data flow with glowing blue lines and soft ethereal gradients" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh-7mASw1lr-Ge9yoDVKFCxMHnS7MnSgalXB3mFYjismbRQ-8kSWspBzWfICgMdacNZTPtrW12wbi8AUK2BQYImkYZTBnxWz99GMVQCyU2Oqpv_-jTweNHLVPm1sIPxmuOcSpxzaP_la_kCaSi78a2mzl1KuaE_L6ypPrFRtQxq5hielLyVEFG5tdj2JQoK8OflQxCcXmClif5Aw2DLxNIh5lG2IWcxkeEwkzOuxEQYt8Xi6IeioWoQKYtDGSPv8XVtCLH6slYkYM"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
|
||||
<p class="text-white text-xs font-medium italic">"Secure architectural bridging for enterprise communication."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Action Bar -->
|
||||
<div class="col-span-12 mt-4">
|
||||
<div class="glass-panel p-6 rounded-2xl flex items-center justify-between shadow-[0_24px_48px_-12px_rgba(0,0,0,0.1)] border border-white/40">
|
||||
<div class="flex items-center text-on-surface-variant text-sm font-medium">
|
||||
<span class="material-symbols-outlined mr-2 text-primary">info</span>
|
||||
Ensure all fields are correctly populated before validating.
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="px-8 py-3 rounded-xl font-bold text-on-surface hover:bg-surface-container-high transition-all duration-200 border border-outline-variant/20">
|
||||
Save Draft
|
||||
</button>
|
||||
<button class="px-10 py-3 rounded-xl font-bold text-white bg-gradient-to-br from-primary to-primary-container shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all duration-200">
|
||||
Validate Connection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB - Restricted visibility as per mandates -->
|
||||
<!-- (Suppressed on Details/Form screens as per instructions) -->
|
||||
</body></html>
|
||||
BIN
screen_design/connect_channel_super_admin/screen.png
Normal file
BIN
screen_design/connect_channel_super_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Reference in New Issue
Block a user