485 lines
25 KiB
HTML
485 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Tenant Ecosystem | ZappCare Business Suite</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;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": {
|
|
"background": "#f7f9fc",
|
|
"surface": "#f7f9fc",
|
|
"surface-variant": "#e0e3e5",
|
|
"secondary-fixed": "#c5e7ff",
|
|
"primary-fixed": "#baeaff",
|
|
"outline-variant": "#bfc8cd",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-secondary-container": "#36647e",
|
|
"on-surface-variant": "#3f484c",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"on-surface": "#191c1e",
|
|
"on-error": "#ffffff",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"surface-container": "#eceef0",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"inverse-surface": "#2d3133",
|
|
"on-background": "#191c1e",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-primary": "#89d0ed",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"surface-tint": "#0c6780",
|
|
"on-error-container": "#93000a",
|
|
"on-primary-fixed": "#001f29",
|
|
"secondary-container": "#b2e0fe",
|
|
"surface-bright": "#f7f9fc",
|
|
"error": "#ba1a1a",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"outline": "#6f787d",
|
|
"on-primary": "#ffffff",
|
|
"surface-dim": "#d8dadc",
|
|
"tertiary": "#865219",
|
|
"primary": "#0c6780",
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"primary-container": "#87ceeb",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"surface-container-low": "#f2f4f6",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container-high": "#e6e8ea",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary-fixed": "#001e2d",
|
|
"on-tertiary-container": "#76450c",
|
|
"tertiary-container": "#fbb674",
|
|
"secondary": "#35637d",
|
|
"on-primary-container": "#005870"
|
|
},
|
|
"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;
|
|
}
|
|
.tonal-architecture-no-borders {
|
|
border: none !important;
|
|
}
|
|
.glassmorphism-hover:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.scale-98-on-click:active {
|
|
transform: scale(0.98);
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f7f9fc;
|
|
color: #191c1e;
|
|
}
|
|
h1, h2, h3, .brand-font {
|
|
font-family: 'Manrope', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex min-h-screen">
|
|
<!-- SideNavBar Component -->
|
|
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto bg-[#f2f4f6] dark:bg-slate-900 tonal-architecture-no-borders flex flex-col p-6 space-y-2 z-50">
|
|
<div class="mb-10 px-2 flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#0c6780] to-[#87ceeb] flex items-center justify-center shadow-lg">
|
|
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">domain</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] tracking-tighter leading-none">ZappCare</h1>
|
|
<p class="text-[10px] font-bold uppercase tracking-widest text-slate-500 mt-1">Business Suite</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-full py-4 mb-8 bg-gradient-to-r from-[#0c6780] to-[#87ceeb] text-white rounded-full font-headline font-bold flex items-center justify-center space-x-2 shadow-xl shadow-primary/20 hover:opacity-90 transition-all scale-98-on-click">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
<span>New Chat</span>
|
|
</button>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" 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-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
|
<span>Inbox</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="contacts">contacts</span>
|
|
<span>Contacts</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
|
<span>Campaigns</span>
|
|
</a>
|
|
<!-- Active Navigation: Tenants -->
|
|
<a class="flex items-center space-x-3 px-4 py-3 bg-[#87ceeb] text-[#005870] font-bold rounded-xl transition-all duration-200 font-['Manrope'] text-sm tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="domain" style="font-variation-settings: 'FILL' 1;">domain</span>
|
|
<span>Tenants</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-[#0c6780] hover:bg-[#e0e3e5] dark:hover:bg-slate-800 rounded-xl transition-all duration-200 font-['Manrope'] font-bold text-sm tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="pt-6 mt-6 border-t border-slate-200 dark:border-slate-800">
|
|
<div class="flex items-center space-x-3 px-2">
|
|
<img class="w-10 h-10 rounded-full object-cover" data-alt="Professional male executive headshot with soft office lighting background, corporate leadership style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHScy2qjx2PSPNz3tEtc2SNXrX3KL67Uki0GVCc9P--FZDFcVFhm25Fv1dhCDhJoPrPW9PoXBv6NwA0CHz57LYCF0DAvX6ozu4GN8BcyI7i9yyKa3saMmW2lmlYxRI4Qtw_mcKCVDL445SYtlh2XeXIWyUgjO7nfH3O-sUPB_WcJw4P7lQVqZxa9qI6rM1NDKY_pJ7bWBpgeaQ7NrvGA-raJ_1hn2r8XqjQAPifU-bNFuJ9vd4F89fJG7ZfMGRLVVlodOtqKJ48c0"/>
|
|
<div class="overflow-hidden">
|
|
<p class="text-sm font-bold text-on-surface truncate">Admin Manager</p>
|
|
<p class="text-[10px] text-slate-500 truncate">admin@zappcare.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Canvas -->
|
|
<main class="flex-1 ml-72 relative">
|
|
<!-- TopNavBar Component -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-18rem)] h-16 z-40 bg-[#f7f9fc]/85 backdrop-blur-xl dark:bg-slate-950/85 flex justify-between items-center px-8 w-full tonal-shift-no-lines">
|
|
<div class="flex items-center flex-1 max-w-xl">
|
|
<div class="relative w-full">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
|
<input class="w-full bg-surface-container-highest/50 border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 placeholder:text-slate-400 font-body" placeholder="Search across ecosystem..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
</button>
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all glassmorphism-hover">
|
|
<span class="material-symbols-outlined" data-icon="chat_bubble_outline">chat_bubble_outline</span>
|
|
</button>
|
|
<div class="h-8 w-px bg-slate-200 dark:bg-slate-800 mx-2"></div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-sm font-semibold text-primary font-headline">Super Admin</span>
|
|
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container text-xs font-bold">SA</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<div class="pt-24 px-8 pb-12">
|
|
<!-- Header & KPIs -->
|
|
<div class="mb-10">
|
|
<h2 class="text-4xl font-extrabold text-on-surface tracking-tight font-headline mb-6">Tenant Ecosystem</h2>
|
|
<!-- KPI Bento Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Total Tenants</p>
|
|
<h3 class="text-3xl font-black text-on-surface font-headline">1,284</h3>
|
|
<p class="text-[10px] text-emerald-600 font-bold mt-1 flex items-center">
|
|
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +12% from last month
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 text-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">groups</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Revenue MRR</p>
|
|
<h3 class="text-3xl font-black text-on-surface font-headline">$42.8k</h3>
|
|
<p class="text-[10px] text-emerald-600 font-bold mt-1 flex items-center">
|
|
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +8.4% growth
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 rounded-full bg-tertiary/10 text-tertiary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">payments</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex items-center justify-between group hover:shadow-md transition-shadow">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Platform Health</p>
|
|
<h3 class="text-3xl font-black text-on-surface font-headline">99.9%</h3>
|
|
<p class="text-[10px] text-slate-400 font-bold mt-1 flex items-center">
|
|
<span class="material-symbols-outlined text-xs mr-1">timer</span> 0.02ms latency avg
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 rounded-full bg-secondary/10 text-secondary flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Table Controls -->
|
|
<div class="bg-surface-container-low rounded-full p-4 mb-4 flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div class="flex items-center space-x-2 w-full md:w-auto">
|
|
<div class="relative flex-1 md:w-80">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">filter_list</span>
|
|
<input class="w-full bg-surface-container-lowest border-none rounded-full pl-12 pr-4 py-3 text-sm focus:ring-2 focus:ring-primary/20 font-body" placeholder="Filter by name, plan, or status..." type="text"/>
|
|
</div>
|
|
<button class="bg-surface-container-lowest p-3 rounded-full text-slate-500 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">tune</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center space-x-3 w-full md:w-auto justify-end">
|
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-tighter">View:</span>
|
|
<div class="flex bg-surface-container-highest rounded-full p-1">
|
|
<button class="bg-surface-container-lowest text-primary shadow-sm px-4 py-1.5 rounded-full text-xs font-bold">Table</button>
|
|
<button class="text-slate-500 px-4 py-1.5 rounded-full text-xs font-bold">Grid</button>
|
|
</div>
|
|
<button class="flex items-center space-x-2 bg-on-surface text-surface rounded-full px-6 py-3 text-sm font-bold hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined text-sm">download</span>
|
|
<span>Export Data</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Tenant Table -->
|
|
<div class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden p-2">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="text-slate-400 font-headline font-bold text-xs uppercase tracking-widest">
|
|
<th class="px-8 py-6">Tenant Identity</th>
|
|
<th class="px-6 py-6">Subscription Plan</th>
|
|
<th class="px-6 py-6">Operational Status</th>
|
|
<th class="px-6 py-6">Active Channels</th>
|
|
<th class="px-6 py-6">Platform Usage</th>
|
|
<th class="px-6 py-6 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm font-body">
|
|
<!-- Tenant Row 1 -->
|
|
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
|
<td class="px-8 py-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="Modern minimalist logo for a tech company with geometric shapes and teal color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCz72T8AZIy1Ka53NJa8lmHVH-UcspJe1GmuD9A_NOLCF1NmTex2DmCQ3eO1eGOzQdSQCC2Z0iuLTeuyzXRomF4FQRAuwZabPcXif5oOozMpjWF4gMekAlqMB64Ej6pre-gVC-qCPcsecg6M_rVRBMRQ_zUBogPjNY9y8TF6bUISMWVr-_bwOAhwYDZsxbVxDwtHUx2Aki6vVVjyfQfg_tbl67CIQFp1oxrKMD9jM8DStnIcwB55O-U-MN-qfjxSsHid6VdfJqHkpw"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface text-base">AeroDynamics Logistics</p>
|
|
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: aero_8829</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Enterprise Elite</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span class="text-emerald-700 font-bold text-xs">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="WhatsApp">
|
|
<span class="material-symbols-outlined text-xs text-[#25D366]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="Email">
|
|
<span class="material-symbols-outlined text-xs text-blue-500" style="font-variation-settings: 'FILL' 1;">mail</span>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center" title="SMS">
|
|
<span class="material-symbols-outlined text-xs text-purple-500" style="font-variation-settings: 'FILL' 1;">sms</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="w-full max-w-[120px]">
|
|
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
|
<span>72%</span>
|
|
<span>3.2M req</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full" style="width: 72%"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Tenant Row 2 -->
|
|
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
|
<td class="px-8 py-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="Abstract vibrant brand mark for health care startup using circular elements and blue gradients" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBd18ECJdft-kXzcgfbWDPqyx5pV6OqnibFW_occV7gVP6StJvYxeUXWdV0ITxyPGZmrZXHvDTvdyKBXidkn97TNlOayw-jFpOjI7WprlkiES_3L024WSttlpPur3oqwLQVOQ0Z6wlru931vNpWweUfAbLRoECF8G-ANOQUbynMi76De0bDs8UP4nKd41mOjj1r0PbZN8TStUgku8Qk1yA4Q718xxWZKsFXRidssqkFjNnEve4XRRhLt1lb4jsUwc-iRcMGfUG908o"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface text-base">Pulse Health Network</p>
|
|
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: pulse_1142</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Business Pro</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
|
|
<span class="text-amber-700 font-bold text-xs">Pending Setup</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-xs text-blue-500" style="font-variation-settings: 'FILL' 1;">mail</span>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-xs text-slate-400">add</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="w-full max-w-[120px]">
|
|
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
|
<span>12%</span>
|
|
<span>0.1M req</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
|
<div class="h-full bg-secondary rounded-full" style="width: 12%"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Tenant Row 3 -->
|
|
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
|
<td class="px-8 py-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="Monochrome professional real estate logo with clean lines and sophisticated architectural vibe" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBscqcyPX4jnJra3YasPQAM4IfouonAF6TfFjNhHezExMmcQXvlfjFoD2xDZoGW15zYRjgSv7i8XwcPzM0XEg6H5f9kAGETFA9cXzYlkiLbTVp2IE633CG3kxEXbd5CFUo7lXZne4vczpl58VMxXbGaSmPPf-3xAvjwr0T2WwOdNxrB2cXgwhSo48m-7j8h8-n1SF14HnTwVmYWeyXwmCDV9vAh33a0MY1QyiG2TcIJFpN0krEvR27PS6GVRQlyfIhiyNiI4ICspPU"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface text-base">Skyline Properties</p>
|
|
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: sky_9031</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="bg-surface-container-highest text-on-surface-variant px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Standard</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="w-2 h-2 rounded-full bg-rose-500"></span>
|
|
<span class="text-rose-700 font-bold text-xs">Suspended</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-slate-200 border-2 border-surface-container-lowest flex items-center justify-center opacity-50">
|
|
<span class="material-symbols-outlined text-xs text-slate-500">lock</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="w-full max-w-[120px]">
|
|
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
|
<span>0%</span>
|
|
<span>N/A</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
|
<div class="h-full bg-error rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Tenant Row 4 -->
|
|
<tr class="group hover:bg-surface-container-low transition-colors duration-200">
|
|
<td class="px-8 py-4">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="Flowing organic logo for a wellness brand with soft pastel colors and fluid shapes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTOmuCEDaB9ci6W1LcS6tZP7Wf0yWYmwxQF-8UyCpbHKmN4CDKFvoCC6JcXYnc_M8Sw-wmuXI2kbKGkvalvTIoYd23Xb2stvpD2VPmy_QdLvweAK1OKF9KDK8j0_7N6SLhxXCQhF1IV8G9sTHLCCM9jWYcIk5iozwIDf1QSrGe-07ncbxX2z3aDbJE8F-IVS5FvbBwXd_xssa1BISEZ70I3Yvjg0JEseW0MdnOxJLP4A3jp7E1uMq12LCfLssWQha22ygCsuoamWI"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface text-base">Zenith Wellness</p>
|
|
<p class="text-xs text-slate-500 font-medium tracking-tight">tenant_id: znth_4422</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-[11px] font-black uppercase tracking-wider">Enterprise Elite</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span class="text-emerald-700 font-bold text-xs">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex -space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-xs text-[#25D366]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-surface-container-lowest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-xs text-pink-500" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="w-full max-w-[120px]">
|
|
<div class="flex justify-between text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-tighter">
|
|
<span>91%</span>
|
|
<span>1.8M req</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full" style="width: 91%"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-slate-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="px-8 py-6 flex items-center justify-between border-t border-slate-50">
|
|
<p class="text-xs font-bold text-slate-500 uppercase tracking-tighter">Showing 1-10 of 1,284 tenants</p>
|
|
<div class="flex items-center space-x-2">
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-400 hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-white font-bold text-xs">1</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-500 hover:bg-slate-100 font-bold text-xs transition-colors">2</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-500 hover:bg-slate-100 font-bold text-xs transition-colors">3</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-slate-400 hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating Contextual Support -->
|
|
<button class="fixed bottom-8 right-8 w-14 h-14 rounded-full bg-on-surface text-surface shadow-2xl flex items-center justify-center hover:scale-105 transition-transform z-50">
|
|
<span class="material-symbols-outlined">support_agent</span>
|
|
</button>
|
|
</main>
|
|
</body></html> |