Created
January 22, 2026 15:36
-
-
Save gferrin/c31fb9d7f58dc7e0604b530c607ac16f to your computer and use it in GitHub Desktop.
Support Ticket UI Design Mockup for #14498
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Support Ticket UI Mockup - AET Backoffice</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Nunito Sans', 'system-ui', 'sans-serif'], | |
| }, | |
| colors: { | |
| 'primary': { | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| }, | |
| 'nova-primary-blue': '#0EA5E9', | |
| 'logo-primary': '#1E3363', | |
| 'logo-secondary': '#C42127', | |
| }, | |
| fontSize: { | |
| 'xxs': '11px', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* AetCollapsible animation styles */ | |
| .ani-collapse { | |
| overflow: hidden; | |
| transition: max-height 0.2s ease-out; | |
| max-height: 1000px; | |
| } | |
| .ani-collapse.collapsed { | |
| max-height: 0; | |
| } | |
| .collapse-toggle { | |
| transition: transform 0.2s ease-out; | |
| } | |
| .collapse-toggle.collapsed { | |
| transform: rotate(-90deg); | |
| } | |
| /* Form input styling - Tailwind CDN doesn't support @apply, so using regular CSS */ | |
| .form-input-bordered { | |
| border: 1px solid #4b5563; | |
| border-radius: 0.25rem; | |
| padding: 0.5rem 0.75rem; | |
| background-color: #111827; | |
| color: #e5e7eb; | |
| } | |
| .form-input-bordered:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px #0ea5e9; | |
| border-color: #0ea5e9; | |
| } | |
| .form-input-bordered::placeholder { | |
| color: #6b7280; | |
| } | |
| textarea.form-input-bordered { | |
| background-color: #111827; | |
| } | |
| /* Scrollbar styling for dark mode */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| /* Custom divider */ | |
| .divider { | |
| @apply border-gray-100 dark:border-gray-700; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-300 font-sans"> | |
| <!-- View Toggle (for mockup navigation) --> | |
| <div class="fixed top-3 right-3 z-50 flex gap-2"> | |
| <button onclick="showPage('list')" class="shadow relative bg-gray-700 text-gray-300 cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center h-8 px-3 hover:bg-gray-600 focus:outline-none focus:ring focus:ring-primary-500"> | |
| Ticket List | |
| </button> | |
| <button onclick="showPage('detail')" class="shadow relative bg-primary-500 text-white cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center h-8 px-3 hover:bg-primary-400 focus:outline-none focus:ring focus:ring-primary-200"> | |
| Ticket Detail | |
| </button> | |
| </div> | |
| <!-- ============================================ --> | |
| <!-- PAGE: TICKET LIST --> | |
| <!-- ============================================ --> | |
| <div id="list-page" class="hidden min-h-screen"> | |
| <!-- Header --> | |
| <div class="border-b border-gray-700 px-6 py-6"> | |
| <h1 class="text-2xl text-gray-400 font-semibold mb-4">Support Tickets</h1> | |
| <!-- Filters Row --> | |
| <div class="flex flex-wrap gap-3"> | |
| <input | |
| type="text" | |
| placeholder="Search tickets..." | |
| class="form-input-bordered flex-1 max-w-xs" | |
| > | |
| <select class="form-input-bordered min-w-[140px]"> | |
| <option>All Statuses</option> | |
| <option>Open</option> | |
| <option>Pending</option> | |
| <option>Closed</option> | |
| </select> | |
| <select class="form-input-bordered min-w-[160px]"> | |
| <option>All Pipelines</option> | |
| <option>Success Pipeline</option> | |
| <option>Support Pipeline</option> | |
| </select> | |
| <select class="form-input-bordered min-w-[140px]"> | |
| <option>Newest First</option> | |
| <option>Oldest First</option> | |
| <option>Priority</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Table (AetTable pattern) --> | |
| <div class="overflow-hidden overflow-x-auto relative"> | |
| <table class="w-full divide-y divide-gray-700"> | |
| <thead> | |
| <tr class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"> | |
| <th class="px-6 py-3">Subject</th> | |
| <th class="px-2 py-3">Contact</th> | |
| <th class="px-2 py-3">Status</th> | |
| <th class="px-2 py-3">Created</th> | |
| <th class="px-2 py-3">Source</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-700"> | |
| <tr class="group cursor-pointer hover:bg-gray-800" onclick="showPage('detail')"> | |
| <td class="px-6 py-4 font-medium text-gray-300">401K Beneficiary Change - Deceased Account Holder</td> | |
| <td class="px-2 py-4 text-gray-400">Justin Garcia</td> | |
| <td class="px-2 py-4"> | |
| <span class="inline-flex items-center gap-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-600 text-yellow-100"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-yellow-300"></span> | |
| Open | |
| </span> | |
| </td> | |
| <td class="px-2 py-4 text-gray-400">Jan 21, 2026</td> | |
| <td class="px-2 py-4 text-gray-400">Email</td> | |
| </tr> | |
| <tr class="group cursor-pointer hover:bg-gray-800"> | |
| <td class="px-6 py-4 font-medium text-gray-300">Transfer question from Fidelity</td> | |
| <td class="px-2 py-4 text-gray-400">Sarah Miller</td> | |
| <td class="px-2 py-4"> | |
| <span class="inline-flex items-center gap-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-800 text-green-100"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-green-400"></span> | |
| Closed | |
| </span> | |
| </td> | |
| <td class="px-2 py-4 text-gray-400">Jan 20, 2026</td> | |
| <td class="px-2 py-4 text-gray-400">Email</td> | |
| </tr> | |
| <tr class="group cursor-pointer hover:bg-gray-800"> | |
| <td class="px-6 py-4 font-medium text-gray-300">Missing quarterly statement</td> | |
| <td class="px-2 py-4 text-gray-400">Mike Johnson</td> | |
| <td class="px-2 py-4"> | |
| <span class="inline-flex items-center gap-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-red-800 text-red-100"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span> | |
| Urgent | |
| </span> | |
| </td> | |
| <td class="px-2 py-4 text-gray-400">Jan 19, 2026</td> | |
| <td class="px-2 py-4 text-gray-400">Phone</td> | |
| </tr> | |
| <tr class="group cursor-pointer hover:bg-gray-800"> | |
| <td class="px-6 py-4 font-medium text-gray-300">How to add new investment</td> | |
| <td class="px-2 py-4 text-gray-400">Emily Davis</td> | |
| <td class="px-2 py-4"> | |
| <span class="inline-flex items-center gap-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-600 text-yellow-100"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-yellow-300"></span> | |
| Open | |
| </span> | |
| </td> | |
| <td class="px-2 py-4 text-gray-400">Jan 18, 2026</td> | |
| <td class="px-2 py-4 text-gray-400">Email</td> | |
| </tr> | |
| <tr class="group cursor-pointer hover:bg-gray-800"> | |
| <td class="px-6 py-4 font-medium text-gray-300">Distribution request assistance</td> | |
| <td class="px-2 py-4 text-gray-400">Robert Wilson</td> | |
| <td class="px-2 py-4"> | |
| <span class="inline-flex items-center gap-x-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-800 text-blue-100"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span> | |
| Pending | |
| </span> | |
| </td> | |
| <td class="px-2 py-4 text-gray-400">Jan 17, 2026</td> | |
| <td class="px-2 py-4 text-gray-400">Chat</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-between items-center px-6 py-4 border-t border-gray-700"> | |
| <span class="text-sm text-gray-500">Showing 1-5 of 127 tickets</span> | |
| <div class="flex gap-1"> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">Prev</button> | |
| <button class="px-3 py-1.5 text-sm rounded bg-primary-500 text-white">1</button> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">2</button> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">3</button> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">...</button> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">26</button> | |
| <button class="px-3 py-1.5 text-sm rounded border border-gray-600 text-gray-400 hover:bg-gray-800">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ============================================ --> | |
| <!-- PAGE: TICKET DETAIL --> | |
| <!-- ============================================ --> | |
| <div id="detail-page" class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <div class="border-b border-gray-700 px-6 py-4 flex-shrink-0"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center gap-4"> | |
| <a href="#" onclick="showPage('list'); return false;" class="text-gray-500 hover:text-gray-300 flex items-center gap-1 text-sm"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> | |
| Back | |
| </a> | |
| <span class="text-sm text-gray-500">Ticket #39850549114</span> | |
| </div> | |
| <select class="form-input-bordered text-sm bg-yellow-600 text-yellow-100 border-yellow-600 font-semibold"> | |
| <option>Open</option> | |
| <option>Pending</option> | |
| <option>Waiting on us</option> | |
| <option>Closed</option> | |
| </select> | |
| </div> | |
| <h1 class="text-xl text-gray-300 font-semibold mb-2">401K Beneficiary Change - Deceased Account Holder</h1> | |
| <div class="flex gap-4 text-sm text-gray-500"> | |
| <span>Pipeline: <strong class="text-gray-400">Success Pipeline</strong></span> | |
| <span>Owner: <strong class="text-gray-400">Chelsea Seymore</strong></span> | |
| <span>Created: <strong class="text-gray-400">Jan 21, 2026</strong></span> | |
| </div> | |
| </div> | |
| <!-- Main Content: Two-Panel Layout --> | |
| <div class="flex flex-1 min-h-0"> | |
| <!-- LEFT PANEL: Conversation --> | |
| <div class="flex-1 flex flex-col border-r border-gray-700 min-w-0"> | |
| <!-- Panel Header --> | |
| <div class="px-6 py-3 border-b border-gray-700 flex-shrink-0"> | |
| <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Conversation</span> | |
| </div> | |
| <!-- Messages Container --> | |
| <div class="flex-1 overflow-y-auto p-6 space-y-6"> | |
| <!-- Message 1: Customer --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-full bg-purple-600 flex items-center justify-center text-white text-sm font-semibold">JG</div> | |
| <div class="flex-1"> | |
| <span class="font-semibold text-gray-300 text-sm">Justin Garcia</span> | |
| <span class="text-xs text-gray-500 ml-2">Jan 21, 2026 at 8:18 AM</span> | |
| </div> | |
| <span class="text-xxs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">Email</span> | |
| </div> | |
| <div class="ml-12 bg-gray-800 rounded-lg p-4 text-sm text-gray-300 space-y-3"> | |
| <p>Hi Chelsea.</p> | |
| <p>I am needing your assistance on this matter.</p> | |
| <p>I received a call from Andrew Randolph, claiming to be the son of Andrea Crews. He stated that Andrea passed away last 12/4/2025 and wanted to know the process of transferring the account/funds to his name.</p> | |
| <p>He said that he already mailed out a Death Certificate to AET last December.</p> | |
| <p>He doesn't have an existing account with AET and signing an Authorization letter for the client is out of the conversation.</p> | |
| <button class="text-primary-500 text-sm font-semibold hover:underline">See more...</button> | |
| </div> | |
| </div> | |
| <!-- Message 2: Agent --> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-full bg-primary-500 flex items-center justify-center text-white text-sm font-semibold">MH</div> | |
| <div class="flex-1"> | |
| <span class="font-semibold text-gray-300 text-sm">Mark Huggett</span> | |
| <span class="text-xs text-gray-500 ml-2">Jan 21, 2026 at 2:09 PM</span> | |
| </div> | |
| <span class="text-xxs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">Email</span> | |
| </div> | |
| <div class="ml-12 bg-gray-800 rounded-lg p-4 text-sm text-gray-300"> | |
| <p>He is not listed as the beneficiary on the 401k account. He was listed as the beneficiary on the Traditional IRA, all of those assets were moved into the 401k account in 2023. Are there any other living siblings?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Response Composer (NovaCard pattern) --> | |
| <div class="border-t border-gray-700 p-4 bg-gray-800 flex-shrink-0"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg> | |
| <span class="font-semibold text-gray-300 text-sm">AI Response Composer</span> | |
| </div> | |
| <textarea | |
| class="w-full form-input-bordered min-h-[140px] text-sm mb-3 resize-y" | |
| placeholder="Click 'Generate Draft' to create an AI-powered response..." | |
| >Dear Mr. Randolph, | |
| Thank you for reaching out regarding your mother's account. We are sorry for your loss. | |
| To proceed with the beneficiary claim process, we will need the following documentation: | |
| 1. Certified copy of the Death Certificate (we have received this) | |
| 2. Valid government-issued photo ID | |
| 3. Completed Beneficiary Claim Form | |
| Please note that according to our records, you are not currently listed as the designated beneficiary on the 401k account. The listed beneficiary is Margaret Crews. We will need to verify the proper distribution according to the account's beneficiary designation on file. | |
| Would you like me to send you the Beneficiary Claim Form to begin this process? | |
| Best regards, | |
| Chelsea Seymore | |
| AET Customer Success</textarea> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="text-sm text-gray-500">Refine:</span> | |
| <input | |
| type="text" | |
| class="flex-1 form-input-bordered text-sm py-1.5" | |
| placeholder='e.g., "make it more empathetic", "add policy reference"' | |
| > | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="shadow relative bg-gray-700 text-gray-300 cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center h-9 px-3 hover:bg-gray-600 focus:outline-none focus:ring focus:ring-primary-500"> | |
| <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> | |
| Regenerate | |
| </button> | |
| <button class="shadow relative bg-gray-700 text-gray-300 cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center h-9 px-3 hover:bg-gray-600 focus:outline-none focus:ring focus:ring-primary-500"> | |
| <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> | |
| Copy | |
| </button> | |
| <button class="shadow relative bg-primary-500 text-white cursor-pointer rounded text-sm font-bold inline-flex items-center justify-center h-9 px-4 hover:bg-primary-400 focus:outline-none focus:ring focus:ring-primary-200 ml-auto"> | |
| <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg> | |
| Send via HubSpot | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT PANEL: Research --> | |
| <div class="w-[380px] flex-shrink-0 overflow-y-auto bg-gray-850" style="background-color: #111827;"> | |
| <!-- Panel Header --> | |
| <div class="px-4 py-3 border-b border-gray-700"> | |
| <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Research Panel</span> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <!-- User Match Card (NovaCard pattern) --> | |
| <div class="bg-gray-800 rounded-lg shadow p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/></svg> | |
| <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Matched User</span> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="text-lg font-semibold text-gray-200">Andrea Crews</div> | |
| <div class="text-sm text-primary-500">andrea.crews@email.com</div> | |
| <div class="text-sm text-gray-400">(555) 123-4567</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs mb-1.5"> | |
| <span class="text-gray-500">Match Confidence</span> | |
| <span class="text-green-400 font-semibold">High (85%)</span> | |
| </div> | |
| <div class="h-1.5 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="flex-1 shadow relative bg-green-600 text-white cursor-pointer rounded text-xs font-bold inline-flex items-center justify-center h-8 px-3 hover:bg-green-500 focus:outline-none focus:ring focus:ring-green-300"> | |
| <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> | |
| Confirm | |
| </button> | |
| <button class="flex-1 shadow relative bg-gray-700 text-gray-300 cursor-pointer rounded text-xs font-bold inline-flex items-center justify-center h-8 px-3 hover:bg-gray-600 focus:outline-none focus:ring focus:ring-primary-500"> | |
| Search Different | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Related Account (AetCollapsible pattern) --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-750" onclick="togglePanel(this)" style="background-color: rgba(55, 65, 81, 0.5);"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg> | |
| <span class="text-sm font-medium text-gray-300">Related Account</span> | |
| </div> | |
| <svg class="w-4 h-4 text-gray-500 collapse-toggle" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> | |
| </div> | |
| <div class="ani-collapse"> | |
| <div class="px-4 pb-4 pt-2 border-t border-gray-700"> | |
| <div class="mb-3"> | |
| <div class="text-sm font-semibold text-primary-500">401k #892745123</div> | |
| <div class="text-xs text-gray-500">Traditional IRA (Rolled from 401k in 2023)</div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <div class="bg-gray-900 rounded p-2"> | |
| <div class="text-xxs text-gray-500 uppercase">Balance</div> | |
| <div class="text-sm font-semibold text-gray-300">$125,847.32</div> | |
| </div> | |
| <div class="bg-gray-900 rounded p-2"> | |
| <div class="text-xxs text-gray-500 uppercase">Status</div> | |
| <div class="text-sm font-semibold text-gray-300">Active</div> | |
| </div> | |
| </div> | |
| <div class="bg-red-900/30 border border-red-700 rounded p-3 mb-3 text-xs"> | |
| <span class="text-red-400 font-semibold">Beneficiary Mismatch:</span> | |
| <span class="text-red-300"> Andrew Randolph is NOT the listed beneficiary. Current beneficiary: Margaret Crews</span> | |
| </div> | |
| <a href="#" class="text-primary-500 text-sm font-semibold hover:underline inline-flex items-center gap-1"> | |
| View Full Account | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pending Items (AetCollapsible pattern) --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-750" onclick="togglePanel(this)" style="background-color: rgba(55, 65, 81, 0.5);"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> | |
| <span class="text-sm font-medium text-gray-300">Pending Items</span> | |
| <span class="text-xxs bg-gray-700 text-gray-400 px-1.5 py-0.5 rounded">2</span> | |
| </div> | |
| <svg class="w-4 h-4 text-gray-500 collapse-toggle" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> | |
| </div> | |
| <div class="ani-collapse"> | |
| <div class="px-4 pb-4 pt-2 border-t border-gray-700 space-y-2"> | |
| <div class="flex items-start gap-2 text-sm"> | |
| <span class="text-yellow-500 mt-0.5">•</span> | |
| <span class="text-gray-300">Death certificate verification required</span> | |
| </div> | |
| <div class="flex items-start gap-2 text-sm"> | |
| <span class="text-yellow-500 mt-0.5">•</span> | |
| <span class="text-gray-300">Beneficiary designation verification needed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity (AetCollapsible pattern) --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-750" onclick="togglePanel(this)" style="background-color: rgba(55, 65, 81, 0.5);"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> | |
| <span class="text-sm font-medium text-gray-300">Recent Activity</span> | |
| <span class="text-xxs bg-gray-700 text-gray-400 px-1.5 py-0.5 rounded">3</span> | |
| </div> | |
| <svg class="w-4 h-4 text-gray-500 collapse-toggle collapsed" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> | |
| </div> | |
| <div class="ani-collapse collapsed"> | |
| <div class="px-4 pb-4 pt-2 border-t border-gray-700 space-y-2"> | |
| <div class="flex gap-3 text-sm"> | |
| <span class="text-gray-500 text-xs whitespace-nowrap w-12">Jan 15</span> | |
| <span class="text-gray-300">Distribution request initiated</span> | |
| </div> | |
| <div class="flex gap-3 text-sm"> | |
| <span class="text-gray-500 text-xs whitespace-nowrap w-12">Dec 20</span> | |
| <span class="text-gray-300">Death certificate received via mail</span> | |
| </div> | |
| <div class="flex gap-3 text-sm"> | |
| <span class="text-gray-500 text-xs whitespace-nowrap w-12">Dec 4</span> | |
| <span class="text-gray-300">Account holder deceased (reported)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Policy References (AetCollapsible pattern) --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-750" onclick="togglePanel(this)" style="background-color: rgba(55, 65, 81, 0.5);"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> | |
| <span class="text-sm font-medium text-gray-300">Policy References</span> | |
| </div> | |
| <svg class="w-4 h-4 text-gray-500 collapse-toggle" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> | |
| </div> | |
| <div class="ani-collapse"> | |
| <div class="px-4 pb-4 pt-2 border-t border-gray-700 space-y-4"> | |
| <div> | |
| <div class="flex items-center gap-1.5 mb-1"> | |
| <svg class="w-3.5 h-3.5 text-primary-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg> | |
| <span class="text-sm font-semibold text-gray-300">Deceased Account Holder</span> | |
| </div> | |
| <p class="text-xs text-gray-400 leading-relaxed">Requires certified death certificate and valid government ID. Beneficiary must be verified against account records before any distribution.</p> | |
| </div> | |
| <div> | |
| <div class="flex items-center gap-1.5 mb-1"> | |
| <svg class="w-3.5 h-3.5 text-primary-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg> | |
| <span class="text-sm font-semibold text-gray-300">Beneficiary Claim Process</span> | |
| </div> | |
| <p class="text-xs text-gray-400 leading-relaxed">Non-listed claimants must provide legal documentation (e.g., court order, will) to establish claim rights. Process takes 5-10 business days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function showPage(page) { | |
| document.getElementById('list-page').classList.add('hidden'); | |
| document.getElementById('detail-page').classList.add('hidden'); | |
| document.getElementById('detail-page').classList.remove('flex'); | |
| if (page === 'list') { | |
| document.getElementById('list-page').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('detail-page').classList.remove('hidden'); | |
| document.getElementById('detail-page').classList.add('flex'); | |
| } | |
| } | |
| function togglePanel(header) { | |
| const content = header.nextElementSibling; | |
| const toggle = header.querySelector('.collapse-toggle'); | |
| content.classList.toggle('collapsed'); | |
| toggle.classList.toggle('collapsed'); | |
| } | |
| // Initialize: show detail page by default | |
| showPage('detail'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment