Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HBU Asset Recovery Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f97316', | |
| secondary: '#f97316', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-slate-900 text-slate-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-slate-800 border-b border-orange-500/20 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="shield" class="text-orange-500 mr-2"></i> | |
| <span class="font-bold text-xl text-orange-500">HBU Asset Recovery</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="index.html" class="bg-orange-500 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="leads.html" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leads</a> | |
| <a href="automation.html" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Automation</a> | |
| <a href="compliance.html" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Compliance</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="telegram-btn" class="text-slate-400 hover:text-white"> | |
| <i data-feather="send" class="h-5 w-5"></i> | |
| </button> | |
| <button id="notification-btn" class="text-slate-400 hover:text-white relative"> | |
| <i data-feather="bell" class="h-5 w-5"></i> | |
| <span class="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/people/40x40/42" alt="User"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Recovery Score Section --> | |
| <div class="bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl p-6 mb-8 border border-orange-500/20"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white">Empire Dashboard</h1> | |
| <p class="text-slate-400 mt-1">Real-time asset recovery metrics and performance</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-5xl font-bold text-orange-500">92/100</div> | |
| <div class="text-sm text-slate-400">Recovery Score</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Revenue Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-slate-800 rounded-lg p-6 border border-orange-500/20"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Monthly Revenue</p> | |
| <p class="text-2xl font-bold text-white">$416,667</p> | |
| <p class="text-green-400 text-sm">↑ 12% from last month</p> | |
| </div> | |
| <div class="text-orange-500"> | |
| <i data-feather="dollar-sign" class="h-8 w-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-6 border border-orange-500/20"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Active Leads</p> | |
| <p class="text-2xl font-bold text-white">2,847</p> | |
| <p class="text-green-400 text-sm">↑ 8% from last week</p> | |
| </div> | |
| <div class="text-orange-500"> | |
| <i data-feather="users" class="h-8 w-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-6 border border-orange-500/20"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Success Rate</p> | |
| <p class="text-2xl font-bold text-white">98.2%</p> | |
| <p class="text-green-400 text-sm">↑ 2.1% improvement</p> | |
| </div> | |
| <div class="text-orange-500"> | |
| <i data-feather="trending-up" class="h-8 w-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-6 border border-orange-500/20"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-slate-400 text-sm">ARU Status</p> | |
| <p class="text-2xl font-bold text-green-400">Active</p> | |
| <p class="text-slate-400 text-sm">47 states running</p> | |
| </div> | |
| <div class="text-green-400"> | |
| <i data-feather="activity" class="h-8 w-8"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Lead Pipeline --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-slate-800 rounded-lg p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold text-white">Lead Pipeline</h2> | |
| <button class="text-orange-500 hover:text-orange-400"> | |
| <i data-feather="refresh-cw" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <canvas id="pipelineChart" class="w-full h-64"></canvas> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-slate-800 rounded-lg p-6 mt-6"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Recent Activity</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-green-400 rounded-full mr-3"></div> | |
| <div> | |
| <p class="text-white font-medium">Claim Approved - $45,000</p> | |
| <p class="text-slate-400 text-sm">John Doe - Oklahoma County</p> | |
| </div> | |
| </div> | |
| <span class="text-slate-400 text-sm">2 min ago</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-orange-400 rounded-full mr-3"></div> | |
| <div> | |
| <p class="text-white font-medium">New High-Value Lead</p> | |
| <p class="text-slate-400 text-sm">ARV $350K - Equity 78%</p> | |
| </div> | |
| </div> | |
| <span class="text-slate-400 text-sm">15 min ago</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full mr-3"></div> | |
| <div> | |
| <p class="text-white font-medium">ARU Swarm Completed</p> | |
| <p class="text-slate-400 text-sm">1,247 leads processed - FL</p> | |
| </div> | |
| </div> | |
| <span class="text-slate-400 text-sm">1 hour ago</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-slate-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-purple-400 rounded-full mr-3"></div> | |
| <div> | |
| <p class="text-white font-medium">AI Call Campaign Sent</p> | |
| <p class="text-slate-400 text-sm">234 contacts - 67% answer rate</p> | |
| </div> | |
| </div> | |
| <span class="text-slate-400 text-sm">2 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="space-y-6"> | |
| <!-- Quick Actions --> | |
| <div class="bg-slate-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Quick Actions</h2> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i data-feather="plus" class="h-4 w-4 mr-2"></i> | |
| Add New Lead | |
| </button> | |
| <button class="w-full bg-slate-700 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i data-feather="search" class="h-4 w-4 mr-2"></i> | |
| Skip Trace Lead | |
| </button> | |
| <button class="w-full bg-slate-700 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i data-feather="phone" class="h-4 w-4 mr-2"></i> | |
| Start AI Call | |
| </button> | |
| <button class="w-full bg-slate-700 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i data-feather="file-text" class="h-4 w-4 mr-2"></i> | |
| Generate Claim | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Compliance Status --> | |
| <div class="bg-slate-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold text-white mb-4">Compliance Status</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">TCPA Compliance</span> | |
| <span class="text-green-400">99.8%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">FDCPA Compliance</span> | |
| <span class="text-green-400">100%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">DNC Scrub Status</span> | |
| <span class="text-green-400">Current</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-slate-400">Ethics Shield</span> | |
| <span class="text-green-400">Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ARU Map --> | |
| <div class="bg-slate-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold text-white mb-4">ARU Activity Map</h2> | |
| <div class="h-48 bg-slate-700 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="map" class="h-12 w-12 text-slate-400 mx-auto mb-2"></i> | |
| <p class="text-slate-400">47 states active</p> | |
| <p class="text-green-400 text-sm">1.2M leads processed</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Telegram Modal --> | |
| <div id="telegram-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"> | |
| <div class="bg-slate-800 rounded-lg p-6 w-96 max-w-full"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold text-white">AI Command Center</h3> | |
| <button id="close-telegram" class="text-slate-400 hover:text-white"> | |
| <i data-feather="x" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <input type="text" id="telegram-input" placeholder="Enter command (e.g., 'skip-trace John Doe')" | |
| class="w-full bg-slate-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500"> | |
| <button id="send-command" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-lg"> | |
| Send Command | |
| </button> | |
| <div id="telegram-response" class="bg-slate-700 rounded-lg p-4 text-slate-300 text-sm hidden"> | |
| <!-- Response will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |