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

262
screen_design/zappcare_no_data_found/code.html Normal file
View File

@ -0,0 +1,262 @@
<!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 - Empty State</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;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": {
"surface-dim": "#d8dadc",
"on-secondary-fixed-variant": "#194c64",
"tertiary-fixed-dim": "#feb876",
"inverse-surface": "#2d3133",
"on-primary": "#ffffff",
"on-error-container": "#93000a",
"on-tertiary-container": "#76450c",
"error": "#ba1a1a",
"tertiary": "#865219",
"on-surface": "#191c1e",
"surface-container-highest": "#e0e3e5",
"primary": "#0c6780",
"background": "#f7f9fc",
"on-primary-fixed-variant": "#004d62",
"on-primary-fixed": "#001f29",
"primary-fixed": "#baeaff",
"surface-container-lowest": "#ffffff",
"on-primary-container": "#005870",
"error-container": "#ffdad6",
"on-secondary-fixed": "#001e2d",
"secondary": "#35637d",
"tertiary-container": "#fbb674",
"surface-container": "#eceef0",
"on-tertiary": "#ffffff",
"secondary-fixed": "#c5e7ff",
"on-surface-variant": "#3f484c",
"primary-fixed-dim": "#89d0ed",
"tertiary-fixed": "#ffdcbf",
"on-secondary": "#ffffff",
"on-tertiary-fixed": "#2d1600",
"inverse-primary": "#89d0ed",
"surface-tint": "#0c6780",
"secondary-container": "#b2e0fe",
"outline": "#6f787d",
"inverse-on-surface": "#eff1f3",
"surface": "#f7f9fc",
"surface-bright": "#f7f9fc",
"surface-container-low": "#f2f4f6",
"on-secondary-container": "#36647e",
"surface-container-high": "#e6e8ea",
"on-background": "#191c1e",
"outline-variant": "#bfc8cd",
"on-tertiary-fixed-variant": "#6a3b01",
"on-error": "#ffffff",
"secondary-fixed-dim": "#9fccea",
"primary-container": "#87ceeb",
"surface-variant": "#e0e3e5"
},
"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(242, 244, 246, 0.85);
backdrop-filter: blur(20px);
}
</style>
</head>
<body class="bg-background text-on-surface font-body antialiased">
<!-- SideNavBar Anchor -->
<aside class="h-screen w-64 fixed left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl flex flex-col p-4 space-y-2 z-50">
<div class="flex items-center gap-3 px-4 py-6">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-container flex items-center justify-center text-on-primary">
<span class="material-symbols-outlined" data-icon="dns">dns</span>
</div>
<div>
<h1 class="text-xl font-bold text-[#0c6780] font-headline tracking-tight">ZappCare</h1>
<p class="text-[10px] uppercase tracking-widest text-secondary font-bold">System 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 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="dns">dns</span>
Infrastructure
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
Monitoring
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
Agents
</a>
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-['Manrope'] tracking-tight" 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 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="monitor_heart">monitor_heart</span>
Health
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
Logs
</a>
</nav>
<div class="pt-4 border-t border-outline-variant/10 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
Settings
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 rounded-xl font-['Manrope'] font-semibold tracking-tight" href="#">
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
Support
</a>
</div>
</aside>
<!-- TopNavBar Anchor -->
<header class="fixed top-0 right-0 left-64 h-16 z-40 bg-[#f7f9fc]/90 backdrop-blur-md flex items-center justify-between px-8 w-full">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline" data-icon="search">search</span>
<input class="w-full bg-surface-container-highest border-none rounded-full py-2 pl-10 pr-4 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-outline-variant" placeholder="Search tenants or infrastructure..." type="text"/>
</div>
<nav class="hidden lg:flex items-center gap-6 ml-8">
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Dashboard</a>
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Metrics</a>
<a class="text-slate-500 hover:text-slate-800 font-['Inter'] text-sm font-medium transition-opacity" href="#">Reports</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="px-4 py-1.5 rounded-full border border-outline-variant/30 text-primary text-xs font-bold font-label uppercase tracking-wider hover:bg-surface-container-low transition-colors">
System Status
</button>
<div class="flex items-center gap-2">
<button class="p-2 text-slate-500 hover:bg-surface-container rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="p-1 rounded-full border-2 border-primary-container">
<img alt="User Profile" class="w-6 h-6 rounded-full" data-alt="Close-up headshot of a professional system administrator in a clean office setting, soft professional lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHeJQp3qFFKydzrN6yaCzKqQG9XSP9si6_-wRt52q5MA_ot7SBUuPeyLwqaS2bDDSkGK4XlPmdZrPsxPhxYEL2jtzIRGukmVKB8H8_1YUg2GyVq3jg7jLNimhj7AwXBCZMBnzCr6ObN1NcSs5bGFABANBsYZEIT5qCGeDMbWaILBf2N_EuWplfOYIhfpCVxFvMSBH5jyVYQYjRzYH5VXylK3A1G5qZhmJ59t_NMnYHaLfAFgWBvcnx6QZOOIf-ZJjufy75nFqXZ7U"/>
</button>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-16 min-h-screen">
<div class="p-8 max-w-7xl mx-auto flex flex-col items-center justify-center min-h-[calc(100vh-4rem)]">
<!-- Empty State Architectural Shell -->
<div class="w-full max-w-3xl flex flex-col items-center text-center">
<!-- Illustration Area -->
<div class="relative mb-12">
<!-- Tonal architecture circles -->
<div class="absolute inset-0 -z-10 flex items-center justify-center">
<div class="w-80 h-80 bg-surface-container-low rounded-full opacity-40"></div>
<div class="absolute w-64 h-64 bg-surface-container-high rounded-full opacity-30"></div>
</div>
<div class="relative w-72 h-72 flex items-center justify-center">
<!-- Custom Architectural Composition instead of simple img -->
<div class="grid grid-cols-2 gap-4 w-56 h-56">
<div class="bg-surface-container-lowest shadow-2xl shadow-primary/5 rounded-full aspect-square flex items-center justify-center p-6">
<span class="material-symbols-outlined text-6xl text-primary-container/60" data-icon="domain" style="font-size: 80px;">domain</span>
</div>
<div class="bg-surface-container-lowest shadow-2xl shadow-primary/5 rounded-full aspect-square flex items-center justify-center p-6 translate-y-8">
<span class="material-symbols-outlined text-6xl text-outline-variant/40" data-icon="hub" style="font-size: 60px;">hub</span>
</div>
<div class="col-span-2 bg-gradient-to-br from-primary/10 to-primary-container/10 rounded-full h-32 flex items-center justify-center mt-4">
<div class="flex -space-x-4">
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-surface-dim"></div>
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-surface-dim"></div>
<div class="w-12 h-12 rounded-full border-4 border-surface-container-lowest bg-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary-container text-xs" data-icon="add">add</span>
</div>
</div>
</div>
</div>
<!-- Floating Glass Action Bar -->
<div class="absolute bottom-4 right-0 glass-rail px-4 py-2 rounded-full shadow-lg shadow-on-surface/5 flex items-center gap-3 border border-outline-variant/10">
<div class="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
<span class="text-[10px] font-bold font-label text-on-surface-variant uppercase tracking-widest">Searching for nodes...</span>
</div>
</div>
</div>
<!-- Textual Content -->
<div class="space-y-4 max-w-xl">
<h2 class="text-4xl font-extrabold font-headline text-on-surface tracking-tight">No active tenants found</h2>
<p class="text-lg text-on-surface-variant font-body leading-relaxed">
Your ZappCare ecosystem is currently quiet. Start by onboarding a new tenant or connecting an existing infrastructure node to begin monitoring.
</p>
</div>
<!-- CTA Section -->
<div class="mt-10 flex flex-col sm:flex-row items-center gap-4">
<button class="group relative px-8 py-4 bg-gradient-to-br from-primary to-primary-container text-on-primary rounded-full font-headline font-bold text-lg shadow-xl shadow-primary/20 hover:scale-95 transition-all duration-200 ease-in-out flex items-center gap-2">
<span class="material-symbols-outlined" data-icon="add_business">add_business</span>
New Tenant
</button>
<button class="px-8 py-4 bg-transparent border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container-high rounded-full font-headline font-semibold transition-colors duration-200 flex items-center gap-2">
<span class="material-symbols-outlined" data-icon="auto_awesome">auto_awesome</span>
Import Configuration
</button>
</div>
<!-- Secondary Assistance -->
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
<span class="material-symbols-outlined" data-icon="menu_book">menu_book</span>
</div>
<div>
<h4 class="font-bold text-on-surface font-headline">Read Docs</h4>
<p class="text-xs text-on-surface-variant font-body">Learn how to setup clusters</p>
</div>
</div>
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
<span class="material-symbols-outlined" data-icon="live_help">live_help</span>
</div>
<div>
<h4 class="font-bold text-on-surface font-headline">Get Support</h4>
<p class="text-xs text-on-surface-variant font-body">Talk to an integration expert</p>
</div>
</div>
<div class="p-6 bg-surface-container-low rounded-full text-left flex items-start gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
<div class="p-3 bg-surface-container-lowest rounded-full text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
<span class="material-symbols-outlined" data-icon="play_circle">play_circle</span>
</div>
<div>
<h4 class="font-bold text-on-surface font-headline">Tutorials</h4>
<p class="text-xs text-on-surface-variant font-body">Quick start video guides</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Floating Quick Action (suppressed on this specific empty state to avoid redundancy with primary CTA) -->
<!-- But keeping structural placeholder if needed elsewhere -->
<div class="hidden">
<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">
<span class="material-symbols-outlined" data-icon="add">add</span>
</button>
</div>
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB