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

348
screen_design/zappcare_super_admin_dashboard/code.html Normal file
View File

@ -0,0 +1,348 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ZappCare Super Admin Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-fixed": "#c5e7ff",
"primary": "#0c6780",
"on-error-container": "#93000a",
"on-secondary-container": "#36647e",
"surface": "#f7f9fc",
"surface-container-low": "#f2f4f6",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#feb876",
"surface-container-high": "#e6e8ea",
"on-primary-fixed": "#001f29",
"outline": "#6f787d",
"on-secondary-fixed": "#001e2d",
"surface-tint": "#0c6780",
"error": "#ba1a1a",
"on-surface-variant": "#3f484c",
"primary-fixed": "#baeaff",
"on-tertiary-container": "#76450c",
"secondary-container": "#b2e0fe",
"secondary": "#35637d",
"surface-container-lowest": "#ffffff",
"outline-variant": "#bfc8cd",
"on-tertiary": "#ffffff",
"on-error": "#ffffff",
"background": "#f7f9fc",
"surface-bright": "#f7f9fc",
"surface-container-highest": "#e0e3e5",
"on-surface": "#191c1e",
"on-background": "#191c1e",
"inverse-on-surface": "#eff1f3",
"surface-dim": "#d8dadc",
"surface-container": "#eceef0",
"surface-variant": "#e0e3e5",
"inverse-primary": "#89d0ed",
"tertiary": "#865219",
"secondary-fixed-dim": "#9fccea",
"on-secondary-fixed-variant": "#194c64",
"inverse-surface": "#2d3133",
"on-primary-fixed-variant": "#004d62",
"tertiary-container": "#fbb674",
"on-tertiary-fixed": "#2d1600",
"on-tertiary-fixed-variant": "#6a3b01",
"tertiary-fixed": "#ffdcbf",
"primary-container": "#87ceeb",
"error-container": "#ffdad6",
"primary-fixed-dim": "#89d0ed",
"on-primary-container": "#005870",
"on-primary": "#ffffff"
},
"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; background-color: #f7f9fc; color: #191c1e; }
.font-headline { font-family: 'Manrope', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-card { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.85); }
.cta-gradient { background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e0e3e5; border-radius: 10px; }
</style>
</head>
<body class="flex min-h-screen">
<!-- SideNavBar Shell -->
<aside class="h-screen fixed left-0 top-0 w-64 border-none bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
<div class="flex items-center gap-3 px-2 mb-10">
<div class="w-10 h-10 rounded-full cta-gradient flex items-center justify-center text-white shadow-lg">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">architecture</span>
</div>
<div>
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100 font-headline">ZappCare</h1>
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold">Architectural Inbox</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 bg-white/90 dark:bg-slate-800/90 text-sky-700 dark:text-sky-300 rounded-xl shadow-sm text-sm font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span>Analytics</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined">inbox</span>
<span>Inbox</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined">campaign</span>
<span>Campaigns</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined">group</span>
<span>Team</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-sky-600 hover:bg-sky-50/50 dark:hover:bg-sky-900/20 rounded-xl text-sm font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined">settings</span>
<span>Settings</span>
</a>
</nav>
<button class="cta-gradient text-white py-3 px-4 rounded-full font-headline font-bold flex items-center justify-center gap-2 shadow-xl shadow-sky-900/10 active:scale-95 transition-transform">
<span class="material-symbols-outlined">chat</span>
<span>New Chat</span>
</button>
</aside>
<!-- Main Content Area -->
<main class="flex-1 ml-64 min-h-screen bg-surface flex flex-col">
<!-- TopNavBar Shell -->
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8">
<div class="flex items-center gap-8">
<div class="relative group">
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-lg">search</span>
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-4 py-1.5 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search infrastructure..." type="text"/>
</div>
<nav class="flex gap-6">
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 text-sm" href="#">Overview</a>
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">History</a>
<a class="text-slate-500 hover:text-sky-900 transition-colors text-sm" href="#">Audit Logs</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="w-10 h-10 flex items-center justify-center text-on-surface-variant hover:bg-surface-container-low rounded-full transition-colors">
<span class="material-symbols-outlined">help_outline</span>
</button>
<div class="h-8 w-[1px] bg-outline-variant/30"></div>
<div class="flex items-center gap-3 pl-2">
<img alt="Admin User Profile" class="w-8 h-8 rounded-full border-2 border-white shadow-sm" data-alt="Professional headshot of a middle-aged tech administrator with a friendly expression, soft studio lighting on a neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQYO0i-ap1-AI4K0NrOF3xhsJVx6uaZXojFbp3Atx-sIZ4j_fMXMi-5VcnrIbrG5QPGfpgTEhntm6HYd2xHHCX7VMKe-mI-PZWZ1TJrnxih790saKEBKnLm-obR83zUxG40F5nliNd9UcUbZXJCG16aoT9cNMzfHrXGp2apdpSKQgv-uyMEbIheCWcDjb6yYxhWDrd9iiZgKY6_BZQSkE3t-AElIj8cvcMFCkD1zE4w1ftGP0eBXJyQwj_fooJNhhBunSrzipLBYs"/>
<span class="text-sm font-semibold text-on-surface">Admin</span>
</div>
</div>
</header>
<!-- Canvas Content -->
<section class="p-10 max-w-7xl mx-auto w-full space-y-10">
<!-- Hero Header -->
<div class="flex flex-col gap-2">
<h2 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight">System Health</h2>
<p class="text-on-surface-variant font-medium">Real-time performance metrics across the ZappCare ecosystem.</p>
</div>
<!-- Bento Grid KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<!-- KPI 1 -->
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-primary-container/20 rounded-xl text-primary group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">corporate_fare</span>
</div>
<span class="text-emerald-600 text-xs font-bold flex items-center">+12% <span class="material-symbols-outlined text-sm">arrow_upward</span></span>
</div>
<div class="text-3xl font-headline font-extrabold text-on-surface">1,402</div>
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Active Tenants</div>
</div>
<!-- KPI 2 -->
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-secondary-container/20 rounded-xl text-secondary group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
</div>
<span class="text-emerald-600 text-xs font-bold flex items-center">+4% <span class="material-symbols-outlined text-sm">arrow_upward</span></span>
</div>
<div class="text-3xl font-headline font-extrabold text-on-surface">8,920</div>
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Active Channels</div>
</div>
<!-- KPI 3 -->
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-tertiary-container/20 rounded-xl text-tertiary group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">send_and_archive</span>
</div>
<span class="text-on-surface-variant text-xs font-bold flex items-center">Stable <span class="material-symbols-outlined text-sm">horizontal_rule</span></span>
</div>
<div class="text-3xl font-headline font-extrabold text-on-surface">99.98%</div>
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Delivery Rate</div>
</div>
<!-- KPI 4 -->
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow group">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-error-container/20 rounded-xl text-error group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">data_usage</span>
</div>
<span class="text-error text-xs font-bold flex items-center">Warning <span class="material-symbols-outlined text-sm">priority_high</span></span>
</div>
<div class="text-3xl font-headline font-extrabold text-on-surface">84.2%</div>
<div class="text-xs font-bold uppercase tracking-widest text-outline mt-1">Quota Usage</div>
</div>
</div>
<!-- Main Dashboard Layout: Chart & Alerts -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
<!-- Message Volume Chart Visual -->
<div class="lg:col-span-2 bg-surface-container-lowest rounded-full p-8 shadow-sm">
<div class="flex justify-between items-center mb-8">
<div>
<h3 class="text-xl font-headline font-extrabold text-on-surface">Platform Message Volume</h3>
<p class="text-sm text-outline font-medium">Aggregated across all global tenants</p>
</div>
<select class="bg-surface border-none rounded-xl text-sm font-semibold text-primary py-1 px-4 ring-1 ring-outline-variant/30">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
</select>
</div>
<!-- Abstract Chart Representation -->
<div class="h-64 flex items-end justify-between gap-2 px-2">
<div class="w-full bg-primary-container/20 rounded-t-xl h-[40%] hover:bg-primary-container transition-colors relative group">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.2M</div>
</div>
<div class="w-full bg-primary-container/20 rounded-t-xl h-[55%] hover:bg-primary-container transition-colors relative group">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.8M</div>
</div>
<div class="w-full bg-primary-container/20 rounded-t-xl h-[45%] hover:bg-primary-container transition-colors relative group"></div>
<div class="w-full bg-primary-container/20 rounded-t-xl h-[70%] hover:bg-primary-container transition-colors relative group"></div>
<div class="w-full bg-primary-container h-[85%] rounded-t-xl shadow-lg shadow-primary-container/20 relative group">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] px-2 py-1 rounded opacity-100 transition-opacity">2.4M (Peak)</div>
</div>
<div class="w-full bg-primary-container/20 rounded-t-xl h-[60%] hover:bg-primary-container transition-colors relative group"></div>
<div class="w-full bg-primary-container/20 rounded-t-xl h-[50%] hover:bg-primary-container transition-colors relative group"></div>
</div>
<div class="flex justify-between mt-4 text-[10px] font-bold text-outline uppercase tracking-widest px-2">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
</div>
</div>
<!-- Disconnected Channels Alert List -->
<div class="bg-surface-container-low rounded-full p-8">
<div class="flex items-center gap-2 mb-6">
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">emergency_home</span>
<h3 class="text-xl font-headline font-extrabold text-on-surface">Critical Alerts</h3>
</div>
<div class="space-y-4">
<p class="text-xs font-bold uppercase tracking-widest text-outline border-b border-outline-variant/20 pb-2">Disconnected Channels (4)</p>
<!-- Alert Item -->
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
<span class="material-symbols-outlined text-lg">sms_failed</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold text-on-surface">MedTech Solutions</p>
<p class="text-[11px] text-on-surface-variant font-medium">WhatsApp API • Disconnected 2h ago</p>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
</div>
<!-- Alert Item -->
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
<span class="material-symbols-outlined text-lg">sms_failed</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold text-on-surface">Global Care Inc.</p>
<p class="text-[11px] text-on-surface-variant font-medium">Line Messenger • Disconnected 14m ago</p>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
</div>
<!-- Alert Item -->
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-xl shadow-sm border-l-4 border-error group cursor-pointer hover:translate-x-1 transition-transform">
<div class="w-10 h-10 rounded-full bg-error-container/10 flex items-center justify-center text-error">
<span class="material-symbols-outlined text-lg">sms_failed</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold text-on-surface">ZappCare Internal</p>
<p class="text-[11px] text-on-surface-variant font-medium">Test Sandbox • Auth Failure</p>
</div>
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">chevron_right</span>
</div>
<button class="w-full py-3 text-xs font-extrabold uppercase tracking-widest text-primary hover:bg-primary-container/10 rounded-xl transition-colors mt-2">
View All Incidents
</button>
</div>
</div>
</div>
<!-- Secondary Feature: Tenant Performance Asymmetric -->
<div class="flex flex-col md:flex-row gap-8">
<div class="flex-1 glass-card p-8 rounded-full shadow-sm relative overflow-hidden group">
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-700"></div>
<div class="relative z-10">
<div class="text-xs font-bold text-primary uppercase tracking-widest mb-2">Efficiency Leader</div>
<h4 class="text-2xl font-headline font-extrabold text-on-surface mb-6">Top Performing Tenant</h4>
<div class="flex items-center gap-6">
<div class="w-24 h-24 rounded-full p-1 bg-gradient-to-tr from-primary to-primary-container">
<img alt="Corporate Logo" class="w-full h-full object-cover rounded-full border-4 border-white" data-alt="Modern office building architectural detail with glass windows reflecting a bright blue sky, high-tech corporate aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDpwXUrs2XSUSczkOMdU5Ai4z8GoMrNsG-piTMoN3YRZt2gXX0bV9Fn8sM0HIVIYovvn5gPFhDjWikdmiuhlm9NB7saO_c_BvIN9j7AnWawP5mkLoW51cpk41lrqSW-t0NnnR9KPP5k1ZUFKSY7pBhRv24ayg9YMXPa5T1IihJFR7-OC1yp9YHUCGiKof_qpOuRhJvi4pZZmTDa6s51GSTjgTShfC1LnX4eYiTKy_3EFdAiYsq1_1cfa6lpjcR-wwoqoRpCQ_b4DfA"/>
</div>
<div class="space-y-1">
<p class="text-xl font-bold text-on-surface">Aero Dynamics Ltd.</p>
<div class="flex gap-4">
<div class="text-center">
<div class="text-sm font-bold text-primary">12k</div>
<div class="text-[10px] text-outline font-bold uppercase tracking-tighter">Daily Msg</div>
</div>
<div class="text-center border-l border-outline-variant/30 pl-4">
<div class="text-sm font-bold text-emerald-600">99.4%</div>
<div class="text-[10px] text-outline font-bold uppercase tracking-tighter">CSAT Score</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md:w-1/3 bg-on-surface p-8 rounded-full shadow-xl text-white flex flex-col justify-between">
<div>
<div class="text-[10px] font-bold text-primary-container uppercase tracking-widest mb-2">Infrastructure Note</div>
<p class="text-sm font-medium leading-relaxed opacity-80">
Scheduled maintenance for the US-East message cluster will commence at <span class="text-white font-bold">04:00 UTC</span>. No downtime expected.
</p>
</div>
<div class="flex items-center gap-3 mt-6 pt-6 border-t border-white/10">
<span class="material-symbols-outlined text-primary-container">dns</span>
<span class="text-[10px] font-bold tracking-widest uppercase">System Region: Global-1</span>
</div>
</div>
</div>
</section>
</main>
<!-- FAB Action (Contextual to Dashboard) -->
<div class="fixed bottom-10 right-10">
<button class="w-16 h-16 rounded-full cta-gradient shadow-2xl flex items-center justify-center text-white hover:scale-105 active:scale-95 transition-all group">
<span class="material-symbols-outlined text-3xl group-hover:rotate-90 transition-transform">add</span>
</button>
</div>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 306 KiB