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

308
screen_design/zappcare_global_search/code.html Normal file
View File

@ -0,0 +1,308 @@
<!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 - Global Search Overlay</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": {
"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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.glass-panel {
background: rgba(247, 249, 252, 0.85);
backdrop-filter: blur(20px);
}
</style>
</head>
<body class="bg-surface font-body text-on-surface">
<!-- Sidebar Shell (Shared Component Logic) -->
<aside class="h-screen fixed left-0 top-0 w-64 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="mb-10 px-4">
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
<p class="text-xs font-medium text-on-surface-variant opacity-60">Architectural Inbox</p>
</div>
<nav class="flex-1 space-y-1">
<div class="bg-white/90 dark:bg-slate-800/90 text-sky-700 dark:text-sky-300 rounded-xl shadow-sm px-4 py-3 flex items-center space-x-3 transition-all duration-200">
<span class="material-symbols-outlined">inbox</span>
<span class="text-sm font-semibold">Inbox</span>
</div>
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
<span class="material-symbols-outlined">bar_chart</span>
<span class="text-sm font-semibold">Analytics</span>
</div>
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
<span class="material-symbols-outlined">campaign</span>
<span class="text-sm font-semibold">Campaigns</span>
</div>
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
<span class="material-symbols-outlined">group</span>
<span class="text-sm font-semibold">Team</span>
</div>
<div class="text-slate-500 dark:text-slate-400 hover:bg-sky-50/50 hover:text-sky-600 px-4 py-3 rounded-xl flex items-center space-x-3 transition-all">
<span class="material-symbols-outlined">settings</span>
<span class="text-sm font-semibold">Settings</span>
</div>
</nav>
<button class="mt-auto bg-gradient-to-br from-primary to-primary-container text-white px-4 py-4 rounded-xl flex items-center justify-center space-x-2 font-bold shadow-lg shadow-primary/20 hover:scale-98 active:scale-95 transition-transform duration-200">
<span class="material-symbols-outlined">chat</span>
<span>New Chat</span>
</button>
</aside>
<!-- Top Bar Shell (Shared Component Logic) -->
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8 ml-64">
<div class="flex items-center flex-1 max-w-2xl">
<div class="relative w-full group">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline">search</span>
</div>
<input class="block w-full pl-10 pr-3 py-2 border-none bg-surface-container-highest rounded-full text-sm placeholder-on-surface-variant focus:ring-2 focus:ring-primary focus:bg-white transition-all duration-200" placeholder="Search across ZappCare..." type="text" value="Zapp"/>
</div>
</div>
<div class="flex items-center space-x-6 ml-8">
<nav class="flex space-x-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 class="flex items-center space-x-4 border-l border-outline-variant/30 pl-6">
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">notifications</span>
<span class="material-symbols-outlined text-outline cursor-pointer hover:text-primary">help_outline</span>
<img alt="Admin User" class="w-8 h-8 rounded-full bg-secondary-container" data-alt="close-up of a professional modern profile avatar icon with soft studio lighting and minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQf1qd8D3itUigB3A1SU-2UevvjF-b35yoL7frJcnM7pTo50dBxWYiY5NFH8UpEiHMDZ4YNzyIOLoBu_p8rqGNUksxROjDQlDy1hIjWFydzGgxhGMbmM6NmJaj8pfGbX-E1eq2dDo8R-mT7bm--il-c8b7ZN6hkXqZyEQFUcjnrlajewOsCxJ_yBryJqBc-MeK3R9etyEgD3Tz07RPm0iLC_3zO3_qd6OZ_qNgbGesiFaOLlA6LKEUQ0TqmNdRhbMlXNbPHJDmdNU"/>
</div>
</div>
</header>
<!-- MAIN CONTENT CANVAS: Search Overlay -->
<main class="ml-64 p-8 min-h-screen">
<!-- Search Overlay Container -->
<div class="max-w-4xl mx-auto">
<div class="glass-panel rounded-full shadow-[0_24px_48px_-12px_rgba(25,28,30,0.08)] overflow-hidden border border-white/40">
<!-- Category Tabs -->
<div class="flex items-center space-x-8 px-8 py-6 border-b border-outline-variant/10">
<div class="flex items-center space-x-2 text-primary border-b-2 border-primary pb-2 -mb-[25px] cursor-pointer">
<span class="material-symbols-outlined text-[20px]">all_inclusive</span>
<span class="text-sm font-bold tracking-tight font-headline">All Results</span>
</div>
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
<span class="material-symbols-outlined text-[20px]">forum</span>
<span class="text-sm font-semibold tracking-tight font-headline">Conversations</span>
</div>
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
<span class="material-symbols-outlined text-[20px]">person</span>
<span class="text-sm font-semibold tracking-tight font-headline">Contacts</span>
</div>
<div class="flex items-center space-x-2 text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer pb-2 -mb-[25px]">
<span class="material-symbols-outlined text-[20px]">corporate_fare</span>
<span class="text-sm font-semibold tracking-tight font-headline">Tenants</span>
</div>
</div>
<div class="grid grid-cols-12 gap-0">
<!-- Left Column: Results -->
<div class="col-span-8 p-8 space-y-8 max-h-[716px] overflow-y-auto">
<!-- Section: Conversations -->
<div>
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Conversations</h3>
<div class="space-y-2">
<div class="group flex items-center p-4 rounded-full hover:bg-white/60 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed mr-4">
<span class="material-symbols-outlined">chat_bubble</span>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Zapp Logistics - Shipment Delay</p>
<span class="text-[10px] text-outline">2h ago</span>
</div>
<p class="text-xs text-on-surface-variant line-clamp-1">Can we expedite the "Zapp" route for the upcoming delivery?</p>
</div>
</div>
<div class="group flex items-center p-4 rounded-full hover:bg-white/60 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant mr-4">
<span class="material-symbols-outlined">mark_chat_unread</span>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Technical Support: ZappCare API</p>
<span class="text-[10px] text-outline">Yesterday</span>
</div>
<p class="text-xs text-on-surface-variant line-clamp-1">The integration for ZappCare is now live on production.</p>
</div>
</div>
</div>
</div>
<!-- Section: Contacts -->
<div>
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Contacts</h3>
<div class="grid grid-cols-2 gap-3">
<div class="group flex items-center p-3 rounded-full border border-transparent hover:border-outline-variant/20 hover:bg-white/80 transition-all cursor-pointer">
<img class="w-10 h-10 rounded-full mr-3 object-cover shadow-sm" data-alt="vibrant portrait of a business professional with a warm smile in a brightly lit modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPNgQF_-NcUNKTLb2iww87Fr0vy2k44bYJsp1i8DD-Y00FmYLPnaFnaw-ygt9fpmLbMbEILQnKvvpHWhzSPkugKL2ZY3B7OZDMGBKc2117pbkToxit29iAuO7EzfmzkpilcgaNfx27KGmqkRrVXT0XK_BzJOFZAH-zYWeTwr3k_P3UIhV7ThTbKwuAuVd2UsFQ4kGdYKSypOsP0q6r2mStVeTSNHj2Ah2fV-K5-SYU7togogSTWaI7Hqpw9HoemGylVzrJEVUABA0"/>
<div>
<p class="text-sm font-bold text-on-surface">Zapp Miller</p>
<p class="text-[11px] text-outline">Product Lead</p>
</div>
</div>
<div class="group flex items-center p-3 rounded-full border border-transparent hover:border-outline-variant/20 hover:bg-white/80 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold mr-3">AZ</div>
<div>
<p class="text-sm font-bold text-on-surface">Anna Zappolo</p>
<p class="text-[11px] text-outline">Key Account</p>
</div>
</div>
</div>
</div>
<!-- Section: Tenants -->
<div>
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Tenants</h3>
<div class="space-y-2">
<div class="group flex items-center p-4 rounded-full bg-surface-container-low hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/10">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-primary shadow-sm mr-4">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">corporate_fare</span>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="text-sm font-bold text-on-surface group-hover:text-primary transition-colors">Zapp Logistics Global</p>
<span class="px-2 py-0.5 rounded-full bg-secondary-container text-[10px] text-on-secondary-container font-bold">Verified</span>
</div>
<p class="text-[11px] text-outline">12 Sub-accounts • New York, US</p>
</div>
<span class="material-symbols-outlined text-outline-variant opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
</div>
</div>
</div>
</div>
<!-- Right Column: Recent & Shortcuts -->
<div class="col-span-4 bg-surface-container-low/50 border-l border-outline-variant/10 p-8">
<div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline">Recent Searches</h3>
<button class="text-[10px] font-bold text-primary hover:underline">Clear</button>
</div>
<div class="space-y-3">
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
<span>zappcare documentation</span>
</div>
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
<span>quarterly audit logs</span>
</div>
<div class="flex items-center text-sm text-on-surface-variant hover:text-primary cursor-pointer transition-colors group">
<span class="material-symbols-outlined text-[18px] mr-2 text-outline group-hover:text-primary">history</span>
<span>marketing campaign q3</span>
</div>
</div>
</div>
<div class="mt-10">
<h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-outline mb-4">Smart Shortcuts</h3>
<div class="grid grid-cols-2 gap-2">
<div class="p-3 bg-white/60 rounded-xl flex flex-col items-center text-center hover:bg-white hover:shadow-sm cursor-pointer transition-all border border-outline-variant/10">
<span class="material-symbols-outlined text-primary mb-1">person_add</span>
<span class="text-[10px] font-bold">New Contact</span>
</div>
<div class="p-3 bg-white/60 rounded-xl flex flex-col items-center text-center hover:bg-white hover:shadow-sm cursor-pointer transition-all border border-outline-variant/10">
<span class="material-symbols-outlined text-secondary mb-1">description</span>
<span class="text-[10px] font-bold">Draft Msg</span>
</div>
</div>
</div>
<div class="mt-10 p-4 bg-primary-container/20 rounded-2xl border border-primary-container/30">
<p class="text-[11px] font-bold text-on-primary-container mb-2">Search Tip</p>
<p class="text-[10px] leading-relaxed text-on-primary-container/80">Press <kbd class="px-1.5 py-0.5 rounded bg-white font-mono text-[9px] shadow-sm">TAB</kbd> to jump between result categories instantly.</p>
</div>
</div>
</div>
<!-- Footer / Status Bar -->
<div class="bg-surface-container-highest/30 px-8 py-3 flex items-center justify-between border-t border-outline-variant/10">
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-1">
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">↑↓</kbd>
<span class="text-[10px] text-outline font-medium">Navigate</span>
</div>
<div class="flex items-center space-x-1">
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">Enter</kbd>
<span class="text-[10px] text-outline font-medium">Select</span>
</div>
<div class="flex items-center space-x-1">
<kbd class="px-1.5 py-0.5 rounded bg-white text-[10px] font-mono border border-outline-variant/20">ESC</kbd>
<span class="text-[10px] text-outline font-medium">Close</span>
</div>
</div>
<span class="text-[10px] font-bold text-primary">8 results for "Zapp"</span>
</div>
</div>
</div>
</main>
<!-- Floating Action Button (FAB) Suppressed per instructions for Overlay/Detail Views -->
</body></html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB