400 lines
24 KiB
HTML
400 lines
24 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"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;500;700;800&family=Inter:wght@300;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(247, 249, 252, 0.85); backdrop-filter: blur(20px); }
|
||
.scale-98-on-click:active { transform: scale(0.98); }
|
||
::-webkit-scrollbar { width: 4px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: #e0e3e5; border-radius: 10px; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-background font-body selection:bg-primary-container selection:text-on-primary-container">
|
||
<!-- SideNavBar (Authority: JSON/Design System) -->
|
||
<aside class="h-screen w-72 fixed left-0 top-0 overflow-y-auto bg-[#f2f4f6] dark:bg-slate-900 flex flex-col p-6 space-y-2 z-50 tonal-architecture-no-borders">
|
||
<div class="mb-8 px-2 flex items-center space-x-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-xl flex items-center justify-center text-white">
|
||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">domain</span>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-2xl font-black text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||
<p class="text-[10px] uppercase tracking-widest text-outline font-bold">Business Suite</p>
|
||
</div>
|
||
</div>
|
||
<button class="w-full py-4 px-6 mb-6 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-headline font-bold flex items-center justify-center space-x-2 shadow-lg shadow-primary/20 scale-98-on-click transition-all">
|
||
<span class="material-symbols-outlined">add_comment</span>
|
||
<span>New Chat</span>
|
||
</button>
|
||
<nav class="space-y-1">
|
||
<!-- Active Tab: Inbox -->
|
||
<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] rounded-xl transition-all font-headline 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 bg-[#87ceeb] text-[#005870] font-headline font-bold rounded-xl transition-all text-sm tracking-tight" href="#">
|
||
<span class="material-symbols-outlined" data-icon="inbox" style="font-variation-settings: 'FILL' 1;">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] rounded-xl transition-all font-headline 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] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
||
<span>Campaigns</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] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||
<span class="material-symbols-outlined" data-icon="domain">domain</span>
|
||
<span>Tenants</span>
|
||
</a>
|
||
<div class="pt-10">
|
||
<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] rounded-xl transition-all font-headline font-bold text-sm tracking-tight" href="#">
|
||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||
<span>Settings</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
<!-- TopNavBar (Authority: JSON/Design System) -->
|
||
<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 tonal-shift-no-lines">
|
||
<div class="flex items-center bg-surface-container-highest/50 rounded-full px-4 py-2 w-96 transition-all focus-within:bg-white focus-within:ring-2 focus-within:ring-primary/20">
|
||
<span class="material-symbols-outlined text-outline text-xl">search</span>
|
||
<input class="bg-transparent border-none focus:ring-0 text-sm w-full placeholder:text-outline/70" placeholder="Search conversations..." type="text"/>
|
||
</div>
|
||
<div class="flex items-center space-x-6">
|
||
<div class="flex items-center space-x-2">
|
||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all relative">
|
||
<span class="material-symbols-outlined">notifications</span>
|
||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||
</button>
|
||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all">
|
||
<span class="material-symbols-outlined">help_outline</span>
|
||
</button>
|
||
<button class="p-2 text-outline hover:bg-slate-100 rounded-full transition-all">
|
||
<span class="material-symbols-outlined">chat_bubble_outline</span>
|
||
</button>
|
||
</div>
|
||
<div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
|
||
<div class="flex items-center space-x-3 cursor-pointer group">
|
||
<div class="text-right">
|
||
<p class="text-sm font-bold font-headline text-on-surface">Alex Rivera</p>
|
||
<p class="text-[10px] text-outline uppercase font-bold">Admin Manager</p>
|
||
</div>
|
||
<img alt="Manager Profile" class="w-10 h-10 rounded-xl object-cover ring-2 ring-primary/10 group-hover:ring-primary/30 transition-all" data-alt="Professional headshot of a Hispanic male manager with a friendly expression in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4fvVltNa9gK4gXAB6uspRoey1WnPmJG7pTGdnF4UMGGSe06jZqwEXziLnZLt0HH1-ogjljTaVnbqyp7LEqujxuhnJ6UpRwu6KE9j3Xn_8oGfNliysZeW5gC4R4KxKWw5LI7paqkdukdgD7qpRd4wFLcBP4KB48V1PuJZfhMp1mJ1Ykfq4Bd82prl71SiHo3nHJKgnUHoJJ7L5vURn6pbP-Q_RBcthLmnkWOWcaJb0MaliLxZUZxTcmBr_dCDmapz7ap8qjSn9ln0"/>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Main Content Canvas (Three Pane Layout) -->
|
||
<main class="ml-72 pt-16 h-screen overflow-hidden flex">
|
||
<!-- Left Pane: Conversation List -->
|
||
<section class="w-80 bg-surface-container-low flex flex-col h-full">
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="font-headline font-extrabold text-xl tracking-tight">Messages</h2>
|
||
<span class="bg-primary/10 text-primary px-2 py-0.5 rounded text-[10px] font-bold">24 Active</span>
|
||
</div>
|
||
<div class="flex space-x-1 bg-surface-container p-1 rounded-xl">
|
||
<button class="flex-1 text-[11px] font-bold py-1.5 bg-white text-primary rounded-lg shadow-sm">All</button>
|
||
<button class="flex-1 text-[11px] font-bold py-1.5 text-outline hover:text-on-surface transition-all">Unassigned</button>
|
||
<button class="flex-1 text-[11px] font-bold py-1.5 text-outline hover:text-on-surface transition-all">Mine</button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 overflow-y-auto px-3 space-y-1">
|
||
<!-- Chat Item Active -->
|
||
<div class="p-4 bg-primary-container/30 rounded-2xl cursor-pointer group relative overflow-hidden transition-all">
|
||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-sm font-headline text-on-primary-container">Sarah Jenkins</span>
|
||
<span class="text-[10px] text-on-primary-container font-medium opacity-70">12:45 PM</span>
|
||
</div>
|
||
<p class="text-xs text-on-primary-container line-clamp-1 opacity-80">I'm having trouble accessing my latest dental claim...</p>
|
||
<div class="flex mt-3 space-x-2">
|
||
<span class="px-2 py-0.5 bg-primary/20 text-on-primary-container rounded-md text-[9px] font-bold">Claims</span>
|
||
<span class="px-2 py-0.5 bg-error/10 text-error rounded-md text-[9px] font-bold">Urgent</span>
|
||
</div>
|
||
</div>
|
||
<!-- Chat Item -->
|
||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-sm font-headline text-on-surface">Mark Thompson</span>
|
||
<span class="text-[10px] text-outline font-medium">11:20 AM</span>
|
||
</div>
|
||
<p class="text-xs text-outline line-clamp-1">Thanks for the update. Let me check with my insurance provider.</p>
|
||
<div class="flex mt-3 justify-between items-center">
|
||
<div class="flex space-x-2">
|
||
<span class="px-2 py-0.5 bg-surface-container-highest text-outline rounded-md text-[9px] font-bold">General</span>
|
||
</div>
|
||
<div class="w-2 h-2 bg-primary rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Chat Item -->
|
||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-sm font-headline text-on-surface">Elena Rodriguez</span>
|
||
<span class="text-[10px] text-outline font-medium">Yesterday</span>
|
||
</div>
|
||
<p class="text-xs text-outline line-clamp-1">The prescription was sent to the wrong pharmacy branch again.</p>
|
||
<div class="flex mt-3 space-x-2">
|
||
<span class="px-2 py-0.5 bg-surface-container-highest text-outline rounded-md text-[9px] font-bold">Pharmacy</span>
|
||
</div>
|
||
</div>
|
||
<!-- More Chat Items -->
|
||
<div class="p-4 hover:bg-surface-container rounded-2xl cursor-pointer group transition-all">
|
||
<div class="flex justify-between items-start mb-1">
|
||
<span class="font-bold text-sm font-headline text-on-surface">Gregory Peck</span>
|
||
<span class="text-[10px] text-outline font-medium">Yesterday</span>
|
||
</div>
|
||
<p class="text-xs text-outline line-clamp-1">Is it possible to reschedule my Tuesday appointment to Wednesday?</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Center Pane: Chat Timeline -->
|
||
<section class="flex-1 bg-white flex flex-col relative">
|
||
<!-- Chat Header -->
|
||
<div class="px-8 py-4 bg-white/80 backdrop-blur-md flex items-center justify-between z-10">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="relative">
|
||
<img class="w-10 h-10 rounded-xl object-cover" data-alt="Close-up portrait of a young woman with a calm expression, professional appearance, soft daylighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYzCvKYWsJtd40qdaxHTlivCEkTcLjgM9LS_qp9mrseybhp3k_lAVJ38Uoe1kZdFQheqe_PPI9s2xLdluiDuTqIvmVTE7qOUpEwT0-Ymabn9JR1mMq2eC50NIb2374nVqZsqaxQwOAy2BHv6e-89jXVn0i-BwVF7Tb4hsyTBoFZ4Mzg3LdgcTYECI96wjljtNeB-VC9uj1Q2skSLPUBNnfousApjdBGg9qhlosVYBUo2MJtnyxi1qilQoQ-Z-HKrF48gjWDuJsUWI"/>
|
||
<div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-headline font-bold text-on-surface">Sarah Jenkins</h3>
|
||
<p class="text-[10px] text-outline font-medium flex items-center">
|
||
<span class="material-symbols-outlined text-[12px] mr-1">timer</span> Active 5m ago • Patient ID: #88291
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<button class="p-2 text-outline hover:bg-surface-container rounded-xl transition-all">
|
||
<span class="material-symbols-outlined">call</span>
|
||
</button>
|
||
<button class="p-2 text-outline hover:bg-surface-container rounded-xl transition-all">
|
||
<span class="material-symbols-outlined">videocam</span>
|
||
</button>
|
||
<button class="px-4 py-2 bg-surface-container text-on-surface-variant font-bold text-xs rounded-xl hover:bg-surface-variant transition-all">
|
||
Resolved
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Messages Area -->
|
||
<div class="flex-1 overflow-y-auto p-8 space-y-8 bg-[#fafbfc]">
|
||
<div class="flex justify-center">
|
||
<span class="px-3 py-1 bg-surface-container-highest/40 text-[10px] font-bold text-outline rounded-full uppercase tracking-tighter">Today, Oct 24</span>
|
||
</div>
|
||
<!-- Inbound -->
|
||
<div class="flex items-end space-x-3 max-w-[80%]">
|
||
<img class="w-8 h-8 rounded-lg object-cover mb-1" data-alt="Female user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3jTlft80N24VFXxYiWAkC-5JhSyopk5ayeSy0EJJWL0avRvKgl7OGrz82r8OoUcm7MCYfmzB7LBelUjb9No4DvePl-feyYOjc8kklDX-q548d3qluEeS0reEmK0d8Ll0vPuieFFSazXOfr8sbACEVFTs96zHxPtfq4NTRh1yxUZPAAMF5_zTBBJayjqCYsfLLyJa1tjBHPktdKnu7WyM-MWxqmiUYvOlct3qKwVrf_wcS7XOhtfqCMu5jfbUyuJ-pn3pY7mdeox4"/>
|
||
<div class="space-y-1">
|
||
<p class="text-[10px] font-bold text-outline ml-1">Sarah Jenkins</p>
|
||
<div class="bg-white p-4 rounded-2xl rounded-bl-none shadow-sm text-sm text-on-surface leading-relaxed border border-outline-variant/10">
|
||
Hello, I'm having trouble accessing my latest dental claim. It says "Pending Review" but it's been over two weeks now. Can you check on this?
|
||
</div>
|
||
<p class="text-[10px] text-outline text-right">12:45 PM</p>
|
||
</div>
|
||
</div>
|
||
<!-- Outbound -->
|
||
<div class="flex flex-row-reverse items-end space-x-3 space-x-reverse max-w-[80%] ml-auto">
|
||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-[10px] font-bold mb-1">AR</div>
|
||
<div class="space-y-1">
|
||
<p class="text-[10px] font-bold text-outline text-right mr-1">Alex Rivera</p>
|
||
<div class="bg-primary text-white p-4 rounded-2xl rounded-br-none shadow-md text-sm leading-relaxed">
|
||
Hi Sarah! Let me look into that for you. Our claims department had a slight backlog last week. One moment while I pull up your file.
|
||
</div>
|
||
<p class="text-[10px] text-outline">12:47 PM • Read</p>
|
||
</div>
|
||
</div>
|
||
<!-- Inbound -->
|
||
<div class="flex items-end space-x-3 max-w-[80%]">
|
||
<img class="w-8 h-8 rounded-lg object-cover mb-1" data-alt="Female user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDb0qPnauFV9cSzJSFYWGAkO6rNckwU661e6S5OiOJDUBeP6DU8MJ55nbex_DJ_ofMo3oblUabMwPLPO4gFNt1_0GvDfx0h0C-WU0Z292kPEdpWJuDEoJd1FAo5GxGyuHizxoeMuAHUIkp21ckkPvz-RGCW2UfP8liSQPwZEBPs8bUdsASsF2yWugvSLQKj-zGIJIppoadOaqzKpbeQL83STtdeh2npnlcj0zwhMJ72q1PkMhZJXbr3FOrTUOheZ4_JGfaVI8proBs"/>
|
||
<div class="space-y-1">
|
||
<div class="bg-white p-4 rounded-2xl rounded-bl-none shadow-sm text-sm text-on-surface leading-relaxed border border-outline-variant/10">
|
||
Thank you! I appreciate the quick response. The claim number is #DC-90122.
|
||
</div>
|
||
<p class="text-[10px] text-outline text-right">12:48 PM</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Message Composer -->
|
||
<div class="p-6 bg-white">
|
||
<div class="mb-4 flex space-x-2">
|
||
<button class="px-3 py-1.5 bg-surface-container-low hover:bg-primary-container/20 text-[11px] font-bold text-primary rounded-lg transition-all flex items-center">
|
||
<span class="material-symbols-outlined text-[14px] mr-1">auto_awesome</span> Quick Replies
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-surface-container-low hover:bg-primary-container/20 text-[11px] font-bold text-primary rounded-lg transition-all flex items-center">
|
||
<span class="material-symbols-outlined text-[14px] mr-1">description</span> Use Template
|
||
</button>
|
||
</div>
|
||
<div class="relative bg-surface-container-low rounded-2xl p-4 focus-within:bg-white focus-within:ring-2 focus-within:ring-primary/20 transition-all border border-transparent">
|
||
<textarea class="w-full bg-transparent border-none focus:ring-0 text-sm resize-none h-20 placeholder:text-outline/60" placeholder="Type your message here..."></textarea>
|
||
<div class="flex items-center justify-between mt-2">
|
||
<div class="flex items-center space-x-3 text-outline">
|
||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">mood</span></button>
|
||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">attach_file</span></button>
|
||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">image</span></button>
|
||
<button class="hover:text-primary transition-all"><span class="material-symbols-outlined text-xl">more_horiz</span></button>
|
||
</div>
|
||
<button class="bg-primary text-white p-2 rounded-xl flex items-center justify-center shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all">
|
||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">send</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Right Pane: Profile & Controls -->
|
||
<section class="w-80 bg-surface-container-low flex flex-col h-full overflow-y-auto">
|
||
<div class="p-6">
|
||
<!-- Profile Card -->
|
||
<div class="bg-white rounded-3xl p-6 shadow-sm mb-6 flex flex-col items-center text-center">
|
||
<img class="w-24 h-24 rounded-3xl object-cover mb-4 ring-4 ring-primary-container/10" data-alt="Portrait of Sarah Jenkins, a professional woman in her early 30s" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDspcthiiVgfO9EWNFObvvW7WwgstUCpUL_FimWlzixiMuaO1_8fdlICs0LBkmr1-RhcOQb6ImU7bgsr5gdGtMTYjeXA-mjld4XL26PJWpB8x2rdnQJxEa5YV00bM-ekzix8W4Nj-j7x8Zthz0BMjBqWy9gvtx-damgmo88SMcTlaxYq_MjQjCsOMuPuKi7ESkRRDCTncEUxOAF0Pi0WNLtB4pu9hulczXVrfrFX3bkiEJOdSM04rJhRXle-X6V7NdRemwnoASBwfc"/>
|
||
<h3 class="font-headline font-extrabold text-lg">Sarah Jenkins</h3>
|
||
<p class="text-xs text-outline font-medium mb-4">s.jenkins@example.com</p>
|
||
<div class="flex flex-wrap justify-center gap-2">
|
||
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container text-[10px] font-bold rounded-full">VIP Member</span>
|
||
<span class="px-3 py-1 bg-tertiary-container/30 text-on-tertiary-container text-[10px] font-bold rounded-full">Dental Plan B</span>
|
||
</div>
|
||
</div>
|
||
<!-- Assignment Controls -->
|
||
<div class="mb-8">
|
||
<p class="text-[10px] font-black uppercase tracking-widest text-outline mb-4">Assignment</p>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between p-3 bg-white rounded-xl border border-outline-variant/10">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center text-on-primary-container">
|
||
<span class="material-symbols-outlined text-lg">person</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<p class="text-xs font-bold">Assignee</p>
|
||
<p class="text-[10px] text-outline">Alex Rivera</p>
|
||
</div>
|
||
</div>
|
||
<button class="text-primary"><span class="material-symbols-outlined text-xl">expand_more</span></button>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 bg-white rounded-xl border border-outline-variant/10">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-outline">
|
||
<span class="material-symbols-outlined text-lg">group</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<p class="text-xs font-bold">Team</p>
|
||
<p class="text-[10px] text-outline">Customer Support</p>
|
||
</div>
|
||
</div>
|
||
<button class="text-primary"><span class="material-symbols-outlined text-xl">expand_more</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tags Section -->
|
||
<div class="mb-8">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<p class="text-[10px] font-black uppercase tracking-widest text-outline">Contact Tags</p>
|
||
<button class="text-primary"><span class="material-symbols-outlined text-sm">add_circle</span></button>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||
#billing <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||
</span>
|
||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||
#urgent <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||
</span>
|
||
<span class="flex items-center px-2 py-1 bg-surface-variant/30 text-on-surface-variant text-[10px] font-bold rounded-md">
|
||
#followup <button class="ml-1 opacity-50 hover:opacity-100">×</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- Internal Notes -->
|
||
<div>
|
||
<p class="text-[10px] font-black uppercase tracking-widest text-outline mb-4">Internal Notes</p>
|
||
<div class="bg-surface-container-highest/30 p-4 rounded-2xl border border-dashed border-outline-variant/50">
|
||
<p class="text-[11px] text-on-surface-variant leading-relaxed mb-3">Patient called yesterday about dental claim #DC-90122. Wants update by Friday. Prefer email communication.</p>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[9px] text-outline font-bold italic">— Added by Mark T.</span>
|
||
<button class="text-primary text-[11px] font-bold">Edit</button>
|
||
</div>
|
||
</div>
|
||
<button class="w-full mt-4 py-2 text-primary text-[11px] font-bold border border-primary/20 rounded-xl hover:bg-primary/5 transition-all">
|
||
+ Add New Note
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body></html> |