432 lines
22 KiB
HTML
432 lines
22 KiB
HTML
<!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 Reports Overview</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&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": {
|
|
"on-primary-container": "#005870",
|
|
"on-primary": "#ffffff",
|
|
"surface-container-low": "#f2f4f6",
|
|
"secondary-container": "#b2e0fe",
|
|
"surface-variant": "#e0e3e5",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-container": "#fbb674",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"surface-tint": "#0c6780",
|
|
"surface-bright": "#f7f9fc",
|
|
"on-error-container": "#93000a",
|
|
"surface": "#f7f9fc",
|
|
"inverse-surface": "#2d3133",
|
|
"background": "#f7f9fc",
|
|
"surface-dim": "#d8dadc",
|
|
"primary-container": "#87ceeb",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#36647e",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#c5e7ff",
|
|
"outline": "#6f787d",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"secondary": "#35637d",
|
|
"primary": "#0c6780",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"on-primary-fixed": "#001f29",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"inverse-primary": "#89d0ed",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"on-background": "#191c1e",
|
|
"on-tertiary-container": "#76450c",
|
|
"on-surface-variant": "#3f484c",
|
|
"surface-container": "#eceef0",
|
|
"tertiary": "#865219",
|
|
"outline-variant": "#bfc8cd",
|
|
"surface-container-high": "#e6e8ea",
|
|
"primary-fixed": "#baeaff",
|
|
"on-secondary-fixed": "#001e2d",
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"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>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.font-headline { font-family: 'Manrope', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.tonal-shift-no-border {
|
|
border: none !important;
|
|
}
|
|
.glass-gradient {
|
|
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
|
}
|
|
.architectural-blur {
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface">
|
|
<!-- SideNavBar Shell -->
|
|
<aside class="fixed left-0 top-0 h-full flex flex-col p-4 h-screen w-64 border-r-0 bg-[#f2f4f6] dark:bg-slate-900 z-50 transition-all duration-200 ease-in-out">
|
|
<div class="flex items-center gap-3 px-2 mb-8">
|
|
<div class="w-10 h-10 flex items-center justify-center rounded-xl bg-primary-container">
|
|
<img alt="ZappCare Logo" class="w-7 h-7" data-alt="clean minimalist medical healthcare logo with modern typography and soft blue aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2wjq7z2m3Ln9ONyd4a7EQiOQe75UwbwK0Rm3SEYXrV5qVZdqN8aar6gJYtCENW3sxicF1jnuZwKO9Tb5oIfv4DF8P21ylHmDbLfROQt8eUgq3vX3gcrBkfmAiY2FgjbF_3u2HCG-EuDEfxKm-LWRsjk7I73fIffNPg7Qj5hCsPSrtghKpPP86DUixmA4O4RGHJXXlJBay4IyHkT1jo2cmbkOZPNQE4B7Rj3Lb75pttWokI6j2dGNn4BA5kpbam5fk3cGtPIJlcuo"/>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
|
<p class="text-[10px] uppercase tracking-widest text-outline font-bold">Business Inbox</p>
|
|
</div>
|
|
</div>
|
|
<button class="glass-gradient text-on-primary w-full py-3 px-4 rounded-full flex items-center justify-center gap-2 mb-8 shadow-lg shadow-primary/20 scale-95 active:scale-90 transition-all duration-200 ease-in-out font-headline font-bold">
|
|
<span class="material-symbols-outlined" data-icon="add">add</span>
|
|
New Chat
|
|
</button>
|
|
<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:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 ease-in-out font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="group">group</span>
|
|
<span>Team</span>
|
|
</a>
|
|
<!-- Active Tab: Reports -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-['Manrope'] tracking-tight transition-all duration-200 ease-in-out" href="#">
|
|
<span class="material-symbols-outlined" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
|
<span>Reports</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-4 border-t border-outline-variant/10">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 ease-in-out font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 ease-in-out font-['Manrope'] font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
<span>Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Canvas -->
|
|
<main class="ml-64 min-h-screen">
|
|
<!-- TopAppBar -->
|
|
<header class="w-full h-16 sticky top-0 z-40 bg-[#f7f9fc]/85 dark:bg-slate-950/85 shadow-none backdrop-blur-md flex justify-between items-center px-8">
|
|
<div class="flex items-center gap-6">
|
|
<h2 class="font-headline font-extrabold text-[#0c6780] dark:text-[#87ceeb] text-lg">Reports Overview</h2>
|
|
<div class="flex items-center gap-4 text-sm font-['Inter']">
|
|
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 transition-colors duration-200" href="#">Overview</a>
|
|
<a class="text-slate-500 hover:text-slate-800 transition-colors duration-200" href="#">Activity</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative hidden lg:block">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm" data-icon="search">search</span>
|
|
<input class="pl-10 pr-4 py-1.5 bg-surface-container rounded-full border-none text-xs w-64 focus:ring-2 focus:ring-primary-container" placeholder="Search analytics..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-200">
|
|
<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-lg transition-colors duration-200">
|
|
<span class="material-symbols-outlined" data-icon="apps">apps</span>
|
|
</button>
|
|
<div class="h-8 w-8 rounded-full bg-secondary-container overflow-hidden ml-2">
|
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional male portrait with friendly expression and clean corporate attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFAa2ljiU2PJfwpxKai47nC1A0G9pjEmkifEKBENFB1unDWmS7HKIZ8y7Ggplt7wt4CkqhNHdKzuWXpwUCkOE2fWS1jQkDt1buMU3ZDPKUrR_uklnk-Zqr-Bm4cLOEfTC9jdB6G0CE2nkTlKcpeATHAdbLqwA6NjHZ83rvhG487FKdKxjsKC0GSieDjeypju4kAelm2gVXwVLLXCn05xgqJQ11K5LwthKCUopMlYBmAz8Xr6n0g-YqQiV_EOA04InTPqrwebw0oog"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Dashboard Content -->
|
|
<div class="p-8 max-w-7xl mx-auto">
|
|
<!-- Filter Bar -->
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-surface-container-low p-1 rounded-full flex">
|
|
<button class="px-4 py-1.5 text-xs font-semibold bg-surface-container-lowest shadow-sm rounded-full text-on-primary-container">7 Days</button>
|
|
<button class="px-4 py-1.5 text-xs font-medium text-outline">30 Days</button>
|
|
<button class="px-4 py-1.5 text-xs font-medium text-outline">90 Days</button>
|
|
</div>
|
|
<div class="h-8 w-px bg-outline-variant/30"></div>
|
|
<div class="relative">
|
|
<button class="flex items-center gap-2 bg-surface-container-lowest px-4 py-2 rounded-full text-xs font-medium border border-outline-variant/20 shadow-sm">
|
|
<span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span>
|
|
All Channels
|
|
<span class="material-symbols-outlined text-sm" data-icon="expand_more">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button class="flex items-center gap-2 bg-primary text-on-primary px-6 py-2.5 rounded-full text-sm font-bold shadow-md hover:shadow-lg transition-all">
|
|
<span class="material-symbols-outlined text-sm" data-icon="download">download</span>
|
|
Export Data
|
|
</button>
|
|
</div>
|
|
<!-- KPI Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Response Time -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-primary-container/20 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">-12%</span>
|
|
</div>
|
|
<p class="text-sm font-medium text-outline mb-1">Avg. Response Time</p>
|
|
<h3 class="text-2xl font-extrabold font-headline text-on-surface">1.8 <span class="text-sm font-medium text-outline">min</span></h3>
|
|
</div>
|
|
<!-- Resolution Rate -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-secondary-container/30 rounded-xl text-secondary">
|
|
<span class="material-symbols-outlined" data-icon="task_alt">task_alt</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+4.2%</span>
|
|
</div>
|
|
<p class="text-sm font-medium text-outline mb-1">Resolution Rate</p>
|
|
<h3 class="text-2xl font-extrabold font-headline text-on-surface">94.2%</h3>
|
|
</div>
|
|
<!-- Agent Productivity -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-tertiary-container/20 rounded-xl text-tertiary">
|
|
<span class="material-symbols-outlined" data-icon="trending_up">trending_up</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-on-error-container bg-error-container/30 px-2 py-1 rounded-full">-0.8%</span>
|
|
</div>
|
|
<p class="text-sm font-medium text-outline mb-1">Productivity Score</p>
|
|
<h3 class="text-2xl font-extrabold font-headline text-on-surface">8.4 / 10</h3>
|
|
</div>
|
|
<!-- Message Volume -->
|
|
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="p-3 bg-primary-container/20 rounded-xl text-primary">
|
|
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+18%</span>
|
|
</div>
|
|
<p class="text-sm font-medium text-outline mb-1">Total Volume</p>
|
|
<h3 class="text-2xl font-extrabold font-headline text-on-surface">12,482</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Layout Content -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Main Chart Card -->
|
|
<div class="lg:col-span-2 bg-surface-container-lowest rounded-full p-8 shadow-sm">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 class="text-lg font-bold font-headline">Message Traffic</h3>
|
|
<p class="text-sm text-outline">Total volume across all integrated channels</p>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-3 h-3 rounded-full bg-primary"></span>
|
|
<span class="text-xs font-medium">WhatsApp</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-3 h-3 rounded-full bg-secondary-container"></span>
|
|
<span class="text-xs font-medium">Email</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart Placeholder Visual -->
|
|
<div class="h-64 flex items-end justify-between gap-4 px-4 relative">
|
|
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20">
|
|
<div class="border-t border-outline"></div>
|
|
<div class="border-t border-outline"></div>
|
|
<div class="border-t border-outline"></div>
|
|
<div class="border-t border-outline"></div>
|
|
</div>
|
|
<div class="w-full bg-primary-container/30 h-[40%] rounded-t-lg relative group transition-all hover:bg-primary-container">
|
|
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-on-surface text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">1.2k</div>
|
|
</div>
|
|
<div class="w-full bg-primary h-[60%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary-container/30 h-[45%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary h-[75%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary-container/30 h-[55%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary h-[90%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary-container/30 h-[65%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary h-[50%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary-container/30 h-[70%] rounded-t-lg relative group transition-all"></div>
|
|
<div class="w-full bg-primary h-[85%] rounded-t-lg relative group transition-all"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-4 px-4 text-[10px] font-bold text-outline uppercase tracking-wider">
|
|
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
|
|
</div>
|
|
</div>
|
|
<!-- Channel Breakdown -->
|
|
<div class="bg-surface-container-low rounded-full p-8 shadow-sm flex flex-col">
|
|
<h3 class="text-lg font-bold font-headline mb-6">Volume by Channel</h3>
|
|
<div class="space-y-6 flex-1">
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="font-medium">WhatsApp</span>
|
|
<span class="font-bold">65%</span>
|
|
</div>
|
|
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary w-[65%]"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="font-medium">Web Chat</span>
|
|
<span class="font-bold">22%</span>
|
|
</div>
|
|
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary-container w-[22%]"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="font-medium">Instagram</span>
|
|
<span class="font-bold">10%</span>
|
|
</div>
|
|
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-secondary-fixed w-[10%]"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="font-medium">Telegram</span>
|
|
<span class="font-bold">3%</span>
|
|
</div>
|
|
<div class="h-2 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-outline-variant w-[3%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 p-4 bg-surface-container-lowest rounded-xl">
|
|
<p class="text-xs text-outline leading-relaxed">WhatsApp continues to be your primary communication driver, seeing a <span class="text-emerald-600 font-bold">12% increase</span> since last week.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Top Performing Agents Table -->
|
|
<div class="lg:col-span-3 bg-surface-container-lowest rounded-full p-8 shadow-sm">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h3 class="text-lg font-bold font-headline">Top Performing Agents</h3>
|
|
<button class="text-primary text-sm font-bold hover:underline">View All Team Members</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="text-[10px] font-bold text-outline uppercase tracking-widest">
|
|
<th class="pb-4 px-2">Agent</th>
|
|
<th class="pb-4 px-2">Conversations</th>
|
|
<th class="pb-4 px-2 text-center">Avg. Score</th>
|
|
<th class="pb-4 px-2">Avg. Response</th>
|
|
<th class="pb-4 px-2 text-right">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm divide-y divide-surface-container">
|
|
<tr>
|
|
<td class="py-4 px-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-10 w-10 rounded-xl bg-primary-container overflow-hidden">
|
|
<img alt="Sarah J." class="w-full h-full object-cover" data-alt="professional woman portrait with confident expression and soft daylight lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhOacpdMZp_jLSBVJChzCcpsTYlXjnrXlh53ZNYDPJaWhSdrm7ZPZ-yTg_M3jTMGdF7Wv1zDV9IlPe9unG7iPvMQDCjLuexll2WzdGqVpS4-7LmqXGKj7vCBwgc4_pJtoz0rDjDANwC2dsp_IEcPrLqiRilyrrNDd62wvelnnbqg0x-1sLrZUDuqHdBFv-hm_1xSjxKXjEDEILVsNSlMgTrpGa45eAl1hyAIR5H8aT1QsCJ7u6hxdxrb-BsKqodhQGy4xHJPcX73w"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Sarah Jenkins</p>
|
|
<p class="text-[11px] text-outline">Senior Support</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 font-medium">842</td>
|
|
<td class="py-4 px-2">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1 bg-emerald-50 text-emerald-700 px-2 py-1 rounded-lg font-bold text-xs">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
4.9
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 text-outline">52s</td>
|
|
<td class="py-4 px-2 text-right">
|
|
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
<span class="text-xs font-medium">Active</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-4 px-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-10 w-10 rounded-xl bg-secondary-container overflow-hidden">
|
|
<img alt="Marcus K." class="w-full h-full object-cover" data-alt="modern businessman profile photo with sharp features and professional studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_dqlWpn2b75BCUdJ3z6Vl0YSimtey6HWKcJSMITaiIqcsqi-KxgkwNV073U38cdbvdi7Xtc_G09dqLqUBrlr5Rz8o74nRSfYvUmJKWUzpzXOcj_ac8dkVRO3bnEjN6fw1TVXXHcP3REB0BjX8WB1V5Z-vmzVGDUmNtUx7ImgCJ2zmsWjfsm_1JGao_itA9LB-m0IyC0chKwff-JXID3XtTyiY3-AmTQDcvukWJSOVQu9lIt4z7-5Yfa17tn2UYBSzNomDRlvR24k"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Marcus Kinsley</p>
|
|
<p class="text-[11px] text-outline">Lead Specialist</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 font-medium">721</td>
|
|
<td class="py-4 px-2">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1 bg-emerald-50 text-emerald-700 px-2 py-1 rounded-lg font-bold text-xs">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
4.8
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 text-outline">1m 15s</td>
|
|
<td class="py-4 px-2 text-right">
|
|
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
<span class="text-xs font-medium">Active</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-4 px-2">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-10 w-10 rounded-xl bg-tertiary-container/30 overflow-hidden">
|
|
<img alt="Elena R." class="w-full h-full object-cover" data-alt="modern business woman portrait in professional office environment with blurred city background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBA39BkrsNt24m7toNQWz_9gL_LwTsk6Z5a5-ntfZoDt_GCJrQWql4d3AtIf-nd0rOJmbPpcS64Fkj9ikcKs9x0e7gxKkrU7BrynkdbAVe9L9E4n5GHlD3rKyrCY9o-X0fnBgkCRM0aFKpVTo-vTIEC7UJwUBGpsaruGXe4vZo1_6kdBTSNcMIoDk2CXBokKawso-eEMiyYehbqu9aM-bgDdDlEBQjCaisLgDezDXPyHJnNWlanM4Cn9E_a7uegWPvdwro94k0Te2Y"/>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Elena Rodriguez</p>
|
|
<p class="text-[11px] text-outline">Customer Success</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 font-medium">654</td>
|
|
<td class="py-4 px-2">
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-1 bg-surface-container text-on-surface-variant px-2 py-1 rounded-lg font-bold text-xs">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
4.6
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-2 text-outline">1m 42s</td>
|
|
<td class="py-4 px-2 text-right">
|
|
<span class="inline-block w-2 h-2 rounded-full bg-slate-300 mr-2"></span>
|
|
<span class="text-xs font-medium text-outline">Offline</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |