424 lines
25 KiB
HTML
424 lines
25 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 Agent Dashboard</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": {
|
|
"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.75rem",
|
|
"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-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.sidebar-active {
|
|
background-color: #87ceeb;
|
|
color: #005870;
|
|
border-radius: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface">
|
|
<!-- SideNavBar Shell -->
|
|
<aside class="bg-[#f2f4f6] dark:bg-slate-900/85 backdrop-blur-xl h-screen w-64 fixed left-0 top-0 flex flex-col p-4 space-y-2 z-50">
|
|
<div class="mb-8 px-2 flex items-center gap-3">
|
|
<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" style="font-variation-settings: 'FILL' 1;">bolt</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
|
<p class="text-xs text-on-surface-variant font-medium">System Admin</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<!-- Mapping JSON tab_labels and tab_icons -->
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">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 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
Monitoring
|
|
</a>
|
|
<!-- Active Tab: Agents -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold font-headline tracking-tight" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
|
Agents
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">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 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">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 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">terminal</span>
|
|
Logs
|
|
</a>
|
|
</nav>
|
|
<button class="w-full py-4 px-4 bg-gradient-to-br from-primary to-primary-container text-on-primary font-headline font-bold rounded-full scale-95 transition-transform duration-200 ease-in-out hover:scale-100 shadow-lg shadow-primary/20 mb-4">
|
|
New Tenant
|
|
</button>
|
|
<div class="pt-4 border-t border-outline-variant/20 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
Settings
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-200/50 transition-all duration-200 font-headline font-semibold tracking-tight" href="#">
|
|
<span class="material-symbols-outlined">help_outline</span>
|
|
Support
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar Shell -->
|
|
<header class="bg-[#f7f9fc]/90 dark:bg-slate-950/90 backdrop-blur-md fixed top-0 right-0 left-64 h-16 z-40 flex items-center justify-between px-8 w-full">
|
|
<div class="flex items-center gap-8">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
|
|
<input class="bg-surface-container-highest border-none rounded-full pl-10 pr-4 py-2 text-sm w-80 focus:ring-2 focus:ring-primary/20" placeholder="Search conversations..." type="text"/>
|
|
</div>
|
|
<nav class="hidden lg:flex items-center gap-6">
|
|
<a class="text-[#0c6780] border-b-2 border-[#0c6780] pb-1 font-['Inter'] text-sm font-medium" 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">
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-bold">System Status</span>
|
|
<button class="text-on-surface-variant hover:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<div class="flex items-center gap-2 pl-4 border-l border-outline-variant/20">
|
|
<div class="text-right">
|
|
<p class="text-sm font-bold leading-tight">Sarah Jenkins</p>
|
|
<p class="text-[10px] text-on-surface-variant font-medium">L3 Specialist</p>
|
|
</div>
|
|
<img class="w-9 h-9 rounded-full object-cover" data-alt="professional portrait of a confident woman in business casual attire with a soft office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzr98Zfws_pThXGcAJ5KKomDnisCdF2ce5y4heluDjAGhe0pV_s44neA4EVHC0v5dn_oEf1kgl9ny6-ZDZAHzb_exgNgi-2eN923BLNj-R0YWRhFcZbom7u60lApdTWKSQwlH0RkRgdr2JRDjW-wnvgKv-jnLqoX5qmNf8sbKmIb1hQXnAEbwc1fCuDD4J4kC1OyOxJFJWQ16ZdS3B9CW-vSzgEnom1gIJKsmlxzmxDeJ-jSHxlxZ7uDQKp5frPImg-mEjRUgr6pA"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Canvas Content -->
|
|
<main class="ml-64 pt-24 px-8 pb-12 min-h-screen">
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- Welcome Header -->
|
|
<div class="mb-10">
|
|
<h2 class="text-4xl font-extrabold font-headline text-on-surface tracking-tight mb-2">My Workload</h2>
|
|
<p class="text-on-surface-variant text-lg">You have <span class="font-bold text-primary">12 active conversations</span> across 4 priority tenants.</p>
|
|
</div>
|
|
<!-- Bento Performance Grid -->
|
|
<div class="grid grid-cols-12 gap-6 mb-12">
|
|
<!-- Main Metric: Response Time -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-6 rounded-full shadow-none border-none flex flex-col justify-between">
|
|
<div>
|
|
<div class="w-12 h-12 bg-secondary-container/30 rounded-xl flex items-center justify-center text-secondary mb-4">
|
|
<span class="material-symbols-outlined">speed</span>
|
|
</div>
|
|
<h3 class="font-headline font-bold text-on-surface-variant text-sm mb-1 uppercase tracking-widest">Avg. Response Time</h3>
|
|
<p class="text-5xl font-black font-headline text-primary">1.4<span class="text-2xl font-bold ml-1">min</span></p>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-2 text-xs font-bold text-emerald-600">
|
|
<span class="material-symbols-outlined text-sm">trending_down</span>
|
|
<span>12% faster than last week</span>
|
|
</div>
|
|
</div>
|
|
<!-- Main Metric: Resolved Chats -->
|
|
<div class="col-span-12 md:col-span-4 bg-surface-container-lowest p-6 rounded-full shadow-none border-none flex flex-col justify-between">
|
|
<div>
|
|
<div class="w-12 h-12 bg-primary-container/20 rounded-xl flex items-center justify-center text-primary mb-4">
|
|
<span class="material-symbols-outlined">check_circle</span>
|
|
</div>
|
|
<h3 class="font-headline font-bold text-on-surface-variant text-sm mb-1 uppercase tracking-widest">Resolved Today</h3>
|
|
<p class="text-5xl font-black font-headline text-on-primary-container">48</p>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-2 text-xs font-bold text-primary">
|
|
<span class="material-symbols-outlined text-sm">military_tech</span>
|
|
<span>Personal record pace</span>
|
|
</div>
|
|
</div>
|
|
<!-- Mini Status Breakdown -->
|
|
<div class="col-span-12 md:col-span-4 grid grid-rows-2 gap-4">
|
|
<div class="bg-surface-container-high p-4 rounded-full flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-error-container/40 rounded-full flex items-center justify-center text-error">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">mark_email_unread</span>
|
|
</div>
|
|
<span class="font-bold text-sm">Unread Messages</span>
|
|
</div>
|
|
<span class="text-2xl font-black text-error">04</span>
|
|
</div>
|
|
<div class="bg-surface-container-high p-4 rounded-full flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-tertiary-container/30 rounded-full flex items-center justify-center text-tertiary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hourglass_empty</span>
|
|
</div>
|
|
<span class="font-bold text-sm">Waiting for Customer</span>
|
|
</div>
|
|
<span class="text-2xl font-black text-tertiary">08</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Active Conversations Section -->
|
|
<div class="bg-surface-container-low rounded-[2rem] p-8">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div class="flex items-center gap-4">
|
|
<h3 class="text-2xl font-bold font-headline">Assigned to Me</h3>
|
|
<div class="flex bg-surface rounded-full p-1 border border-outline-variant/10">
|
|
<button class="px-4 py-1.5 bg-surface-container-lowest shadow-sm rounded-full text-sm font-bold text-primary">All Active</button>
|
|
<button class="px-4 py-1.5 text-sm font-medium text-on-surface-variant hover:text-on-surface">Urgent Only</button>
|
|
</div>
|
|
</div>
|
|
<button class="flex items-center gap-2 text-primary font-bold text-sm hover:underline">
|
|
View History <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<!-- Conversation Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Card 1: Urgent/Unread -->
|
|
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-2 h-full bg-error"></div>
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="close-up of a smiling young man in a denim shirt with soft urban lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAP4wY3k0nS54nGdIORw1J_GF0ixtOP_chrgDhSZZ3Rz2Qzy1dkz69jdBXGfy_63HNuLp5WkNWw7gs4oPh6V0GJY1xgzlBUiTVGdlkhXzUn4VjQmd0o41jIjE6Q0sOtKV6iJuPCXKyiQei2M2hgnOM2u6CDq6Mv5RDYtaIGYVAVHIy-By1EC4EuqUtZWGUen6oVgB_bnMpn052iVdDcT5yg2aFy9HiNdkLDswJ2-D1Jppo50LBvyFNrgBxTeTXJhmJO21wM3k67FA"/>
|
|
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-error rounded-full border-2 border-surface-container-lowest flex items-center justify-center text-[10px] text-white font-bold">!</div>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Marcus Thorne</p>
|
|
<p class="text-xs text-on-surface-variant font-medium">Order #4492</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold uppercase tracking-tighter text-error bg-error-container px-2 py-1 rounded">2m ago</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6 italic">"I still haven't received my tracking number for the international shipment. Can you please..."</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
|
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">domain</span> GlobalTrade
|
|
</span>
|
|
<button class="bg-primary text-white px-4 py-2 rounded-full text-xs font-bold hover:bg-on-primary-container transition-colors">Reply Now</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Waiting Customer -->
|
|
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="vibrant portrait of a woman laughing with soft natural lighting and blurred park background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDWZJpv5EiJh40K5-uRKfMs72GNzv6_cGJdzD4sBhf3jwW7A9Y4QPx0Tp4s1Lb5n52rfeJIAzROkdCYyaWiYGVlN1AKmqK0RdjHbzUy4W5o3YSurfEJqXLKN3gSoArG4aafDHEPbJFFvFa36tCYXcIa71PfbPbFG_LNK_2rXV1jJZl22H__TF8m2ciY9w2ZmVtJxWlWIK5s55PvZWGr9RDE1JtROatXzNSW6ffOjs1gWoJlaNXjQnc6xom0WtaEQ1ZOjS1Vayh2F0k"/>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Elena Rodriguez</p>
|
|
<p class="text-xs text-on-surface-variant font-medium">Billing Inquiry</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold uppercase tracking-tighter text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">1h ago</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"Thank you for the clarification. I'll check my bank statement and get back to you shortly."</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
|
<span class="text-xs font-bold text-secondary flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">hourglass_bottom</span> Awaiting Reply
|
|
</span>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined">more_horiz</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: New Assigned -->
|
|
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-tr from-primary-container to-secondary-container flex items-center justify-center text-on-primary-container font-black">
|
|
JW
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">James Wilson</p>
|
|
<p class="text-xs text-on-surface-variant font-medium">API Integration</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold uppercase tracking-tighter text-primary bg-primary-container px-2 py-1 rounded">Just Now</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"Hey, we're seeing some 403 errors on the production endpoint. Can you take a quick look?"</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
|
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">bolt</span> TechCore
|
|
</span>
|
|
<button class="bg-primary-container text-on-primary-container px-4 py-2 rounded-full text-xs font-bold hover:brightness-95 transition-all">Accept</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4: Normal Priority -->
|
|
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="headshot of a middle-aged man with a warm smile and gentle lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAsRahL8WFtCjhH18nxhZoE7pBvQ8Zxjvc4Bjv_QSSAZBtw18xLVNTQ-XeK629lcocYn_meMN8Una1clOlUDhze9eycMxTURiSRaGDKUYvJraBGpbECZba1p5D4JFmViNdvBp-MLKbwpXzHin7efZKuYGq4HgqAQeK3ZYhqFZmFYt09-x1VBJCtfpUDHtKmibuOrX5nKf-x8I9U6PF3OeiC3VHkjlFwEONkiovGL6GUyCvuQoBFVSXJWdmlWn9PUSmBcvc3ZPRlqB4"/>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Dr. Simon K.</p>
|
|
<p class="text-xs text-on-surface-variant font-medium">Account Update</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold uppercase tracking-tighter text-on-surface-variant bg-surface-container-high px-2 py-1 rounded">15m ago</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"I've uploaded the necessary documents. Let me know if there's anything else needed."</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
|
<span class="text-xs font-bold text-on-surface-variant flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">schedule</span> Last active: 15m
|
|
</span>
|
|
<button class="bg-surface-container text-on-surface px-4 py-2 rounded-full text-xs font-bold hover:bg-surface-container-high transition-colors">Resume</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 5: High Priority / Waiting -->
|
|
<div class="group bg-surface-container-lowest p-6 rounded-[2rem] hover:shadow-xl hover:shadow-primary/5 transition-all duration-300">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-12 h-12 rounded-full object-cover" data-alt="professional woman wearing a light blue suit with a soft daylight background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEdvNU9JG4KgumGmDBQtMbKbHerQPq8DmxLl3hWbNh8oYx8RQgP9jxJC03pT4Kp2fhJ3xh49Xn9bLWt9qllnBV29Bm6IsThV9JFvV_nXRw5t-Qp9qwB_s3tH9azO1LH-oMdVOehwHwFJj-YCNuWLxezZ7hqLcBBhjJHlXY3e6gizauZjQjpmbOasDJa78PJ4z8tGgq4Sa-gp1nlCAQFxPfyeV6NXXvJ83_v-nM2WxiOOMXyDYK2PEpEcSxnyGH8Ecacvlj9kObQFA"/>
|
|
<div>
|
|
<p class="font-bold text-on-surface">Maya Chen</p>
|
|
<p class="text-xs text-on-surface-variant font-medium">Refund Status</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] font-bold uppercase tracking-tighter text-tertiary bg-tertiary-container/20 px-2 py-1 rounded">Waiting</span>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant line-clamp-2 mb-6">"It's been three days since the request. Is there any update on when the funds will be visible?"</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/10">
|
|
<span class="text-xs font-bold text-primary flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">credit_card</span> FinLease
|
|
</span>
|
|
<button class="bg-primary text-white px-4 py-2 rounded-full text-xs font-bold hover:bg-on-primary-container transition-colors">Reply Now</button>
|
|
</div>
|
|
</div>
|
|
<!-- Empty/New Slot Styling (High-end UI Placeholder) -->
|
|
<div class="border-2 border-dashed border-outline-variant/30 p-6 rounded-[2rem] flex flex-col items-center justify-center text-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer group">
|
|
<div class="w-12 h-12 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-primary transition-colors mb-3">
|
|
<span class="material-symbols-outlined">add</span>
|
|
</div>
|
|
<p class="font-bold text-sm text-on-surface-variant group-hover:text-primary transition-colors">Accept Next Queue Item</p>
|
|
<p class="text-[10px] text-outline font-medium mt-1">45 pending in global queue</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Side Metric Column: Weekly Goal Progress -->
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="md:col-span-2 bg-gradient-to-br from-on-primary-container to-primary text-white p-8 rounded-[2rem] relative overflow-hidden shadow-2xl shadow-primary/20">
|
|
<div class="relative z-10">
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div>
|
|
<h4 class="text-2xl font-bold font-headline mb-2">Weekly Goal Progress</h4>
|
|
<p class="text-primary-fixed-dim text-sm">You are on track to exceed your CSAT targets.</p>
|
|
</div>
|
|
<div class="bg-white/20 backdrop-blur-md px-4 py-2 rounded-full text-xs font-bold">
|
|
85% Complete
|
|
</div>
|
|
</div>
|
|
<div class="w-full bg-white/10 h-3 rounded-full mb-4 overflow-hidden">
|
|
<div class="bg-primary-container h-full w-[85%]"></div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">Target</p>
|
|
<p class="text-lg font-bold">250 Chats</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">Current</p>
|
|
<p class="text-lg font-bold">212 Chats</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-primary-fixed-dim text-[10px] uppercase font-bold tracking-widest mb-1">CSAT</p>
|
|
<p class="text-lg font-bold">4.9 / 5.0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Decorative element -->
|
|
<div class="absolute -right-16 -bottom-16 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl"></div>
|
|
</div>
|
|
<div class="bg-surface-container-high p-8 rounded-[2rem] flex flex-col justify-center items-center text-center">
|
|
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center text-primary shadow-sm mb-4">
|
|
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
</div>
|
|
<h4 class="font-bold text-on-surface mb-1">Top Performer</h4>
|
|
<p class="text-xs text-on-surface-variant font-medium mb-4 leading-relaxed px-4">You ranked in the top 5% for response quality this month.</p>
|
|
<button class="text-primary font-bold text-sm border-b-2 border-primary/20 hover:border-primary transition-all">View Leaderboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Contextual FAB (Hidden on Dashboards usually, but kept for active quick action as per shell mandate if applicable) -->
|
|
<!-- Suppressed on Dashboard as per shell mandate preference for transactional focus, but used if primary action is 'New Chat' -->
|
|
<button class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-br from-primary to-primary-container text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform z-50">
|
|
<span class="material-symbols-outlined text-2xl">chat</span>
|
|
</button>
|
|
</body></html> |