wirabasalamah/whatsapp-inbox-platform
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Wira Basalamah
2026-04-21 09:29:29 +07:00
commit adde003fba
222 changed files with 37657 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
screen_design/subscription_catalog_super_admin/code.html Normal file
View File

@ -0,0 +1,345 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Manrope:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-rail {
background: rgba(247, 249, 252, 0.85);
backdrop-filter: blur(20px);
}
.primary-gradient {
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
}
</style>
</head>
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
<!-- Side Navigation Rail -->
<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 z-50">
<div class="mb-8 px-2 flex items-center gap-3">
<div class="w-10 h-10 primary-gradient rounded-full flex items-center justify-center text-white">
<span class="material-symbols-outlined" data-icon="hub">hub</span>
</div>
<div>
<h1 class="font-['Manrope'] font-black text-2xl tracking-tight text-[#0c6780]">ZappCare</h1>
<p class="font-['Manrope'] font-semibold text-xs text-slate-500 uppercase tracking-widest">Super Admin</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="domain">domain</span>
Tenants
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="hub">hub</span>
Channels
</a>
<a class="flex items-center gap-3 px-4 py-3 bg-white dark:bg-slate-700 text-[#0c6780] dark:text-[#87ceeb] rounded-xl shadow-sm transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="payments">payments</span>
Billing
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
Audit Log
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:text-[#0c6780] hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-200 font-['Manrope'] font-semibold text-base" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
Settings
</a>
</nav>
<div class="pt-4 mt-auto">
<button class="w-full primary-gradient text-white rounded-full py-4 px-6 flex items-center justify-center gap-2 font-['Manrope'] font-bold transition-transform active:scale-95">
<span class="material-symbols-outlined" data-icon="add">add</span>
New Instance
</button>
</div>
</aside>
<!-- Main Canvas -->
<main class="ml-64 min-h-screen">
<!-- Top Bar -->
<header class="sticky top-0 z-40 bg-[#f7f9fc]/85 backdrop-blur-md dark:bg-slate-900/85 shadow-[0_24px_24px_-4px_rgba(25,28,30,0.06)] flex justify-between items-center w-full px-8 py-4">
<div class="flex items-center gap-4">
<h2 class="font-headline text-2xl font-extrabold text-on-surface">Subscription Plans</h2>
<span class="bg-secondary-container text-on-secondary-container text-xs font-bold px-3 py-1 rounded-full">CATALOG</span>
</div>
<div class="flex items-center gap-6">
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-3 text-outline" data-icon="search">search</span>
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-6 py-2 text-sm focus:ring-2 focus:ring-primary w-64 transition-all" placeholder="Search catalog..." type="text"/>
</div>
<div class="flex items-center gap-4 text-[#0c6780]">
<button class="hover:bg-[#f2f4f6] p-2 rounded-full transition-colors"><span class="material-symbols-outlined" data-icon="notifications">notifications</span></button>
<button class="hover:bg-[#f2f4f6] p-2 rounded-full transition-colors"><span class="material-symbols-outlined" data-icon="account_circle">account_circle</span></button>
</div>
</div>
</header>
<!-- Content Area -->
<div class="p-12 max-w-7xl mx-auto">
<!-- Editorial Intro -->
<section class="mb-12">
<p class="text-secondary font-medium mb-2">Architectural Management</p>
<h3 class="font-headline text-5xl font-bold tracking-tight text-on-surface leading-tight mb-4">
Scalable foundations for <br/>every enterprise journey.
</h3>
<p class="text-on-surface-variant max-w-2xl text-lg leading-relaxed">
Define and manage the structural tiers of ZappCare. From high-frequency messaging to specialized enterprise infrastructure, adjust quotas and pricing across the ecosystem.
</p>
</section>
<!-- Plan Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Basic Plan Card -->
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.08)]">
<div class="mb-8">
<span class="text-xs font-black tracking-widest text-outline uppercase mb-2 block">Starter Tier</span>
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Basic</h4>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black text-on-surface">$29</span>
<span class="text-on-surface-variant font-medium">/month</span>
</div>
</div>
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
<span class="text-on-surface-variant font-medium">Messages</span>
</div>
<span class="font-bold text-on-surface">5,000 /mo</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="person">person</span>
<span class="text-on-surface-variant font-medium">Seats</span>
</div>
<span class="font-bold text-on-surface">2 included</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
<span class="text-on-surface-variant font-medium">Broadcasts</span>
</div>
<span class="font-bold text-on-surface">10 /mo</span>
</div>
</div>
<div class="mt-8 pt-4">
<button class="w-full flex items-center justify-center gap-2 py-4 px-6 border border-outline-variant/30 rounded-xl text-primary font-bold hover:bg-primary-container hover:border-transparent transition-all">
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
Edit Plan
</button>
</div>
</div>
<!-- Pro Plan Card (Featured) -->
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.12)] border-2 border-primary-container shadow-sm overflow-hidden">
<div class="absolute top-0 right-0">
<div class="bg-primary-container text-on-primary-container px-6 py-1 rounded-bl-2xl font-bold text-xs">MOST POPULAR</div>
</div>
<div class="mb-8">
<span class="text-xs font-black tracking-widest text-primary uppercase mb-2 block">Growth Tier</span>
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Pro</h4>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black text-on-surface">$99</span>
<span class="text-on-surface-variant font-medium">/month</span>
</div>
</div>
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
<span class="text-on-surface-variant font-medium">Messages</span>
</div>
<span class="font-bold text-on-surface">50,000 /mo</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="group">group</span>
<span class="text-on-surface-variant font-medium">Seats</span>
</div>
<span class="font-bold text-on-surface">10 included</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
<span class="text-on-surface-variant font-medium">Broadcasts</span>
</div>
<span class="font-bold text-on-surface">Unlimited</span>
</div>
<div class="flex items-center gap-3 text-primary text-sm font-semibold mt-2">
<span class="material-symbols-outlined text-sm" data-icon="auto_awesome" data-weight="fill">auto_awesome</span>
Includes Priority Support
</div>
</div>
<div class="mt-8 pt-4">
<button class="w-full primary-gradient text-white rounded-xl py-4 px-6 flex items-center justify-center gap-2 font-bold shadow-lg transition-transform active:scale-95">
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
Edit Plan
</button>
</div>
</div>
<!-- Enterprise Plan Card -->
<div class="bg-surface-container-lowest rounded-[2rem] p-8 flex flex-col relative group transition-all duration-300 hover:shadow-[0_32px_64px_-12px_rgba(0,0,0,0.08)]">
<div class="mb-8">
<span class="text-xs font-black tracking-widest text-outline uppercase mb-2 block">Corporate Tier</span>
<h4 class="font-headline text-3xl font-bold text-on-surface mb-4">Enterprise</h4>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black text-on-surface">$499</span>
<span class="text-on-surface-variant font-medium">/month</span>
</div>
</div>
<div class="space-y-6 flex-1 border-t border-outline-variant/15 pt-8">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="chat">chat</span>
<span class="text-on-surface-variant font-medium">Messages</span>
</div>
<span class="font-bold text-on-surface">Unlimited</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="corporate_fare">corporate_fare</span>
<span class="text-on-surface-variant font-medium">Seats</span>
</div>
<span class="font-bold text-on-surface">50+ included</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary" data-icon="campaign">campaign</span>
<span class="text-on-surface-variant font-medium">Broadcasts</span>
</div>
<span class="font-bold text-on-surface">Unlimited</span>
</div>
</div>
<div class="mt-8 pt-4">
<button class="w-full flex items-center justify-center gap-2 py-4 px-6 border border-outline-variant/30 rounded-xl text-primary font-bold hover:bg-primary-container hover:border-transparent transition-all">
<span class="material-symbols-outlined text-sm" data-icon="edit">edit</span>
Edit Plan
</button>
</div>
</div>
</div>
<!-- Bento Grid Metrics -->
<div class="mt-16 grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="md:col-span-2 bg-surface-container-low rounded-[2rem] p-8 flex flex-col justify-between">
<div>
<h5 class="text-on-surface-variant font-semibold mb-4">Global Reach</h5>
<p class="text-3xl font-bold text-on-surface leading-tight">842 Active Subscriptions</p>
</div>
<div class="mt-8 h-2 w-full bg-surface-container-highest rounded-full overflow-hidden">
<div class="h-full bg-primary" style="width: 75%"></div>
</div>
</div>
<div class="bg-primary-container rounded-[2rem] p-8 flex flex-col justify-between">
<span class="material-symbols-outlined text-on-primary-container text-4xl" data-icon="trending_up">trending_up</span>
<div>
<p class="text-on-primary-container font-black text-2xl">+12%</p>
<p class="text-on-primary-container/80 text-sm">Monthly Revenue Growth</p>
</div>
</div>
<div class="bg-surface-container-highest rounded-[2rem] p-8 flex flex-col justify-between">
<span class="material-symbols-outlined text-on-surface text-4xl" data-icon="cloud_done">cloud_done</span>
<div>
<p class="text-on-surface font-black text-2xl">99.9%</p>
<p class="text-on-surface-variant text-sm">System Uptime Avg</p>
</div>
</div>
</div>
<!-- Feature Comparison Footer (Simplified Editorial Style) -->
<section class="mt-24 border-t border-outline-variant/10 pt-12">
<div class="flex flex-col md:flex-row justify-between items-end gap-8">
<div class="max-w-xl">
<h4 class="font-headline text-3xl font-bold mb-4">The Architectural Difference.</h4>
<p class="text-on-surface-variant">Every plan is built on ZappCare's core infrastructure. Enterprise-grade security and message delivery reliability are standard across all tiers, ensuring no tenant is left behind as they scale.</p>
</div>
<div class="flex gap-4">
<button class="px-8 py-3 rounded-full border border-outline-variant text-on-surface font-semibold hover:bg-surface-container-low transition-colors">Compare Features</button>
<button class="px-8 py-3 rounded-full primary-gradient text-white font-bold shadow-md">Add New Tier</button>
</div>
</div>
</section>
</div>
</main>
<!-- Floating Help Trigger -->
<div class="fixed bottom-8 right-8 z-50">
<button class="w-14 h-14 bg-surface-container-lowest text-primary rounded-full shadow-2xl flex items-center justify-center border border-outline-variant/10 hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
</button>
</div>
</body></html>

BIN
screen_design/subscription_catalog_super_admin/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB