# HBU Asset Recovery - Complete System Documentation

**The AI-Powered Asset Recovery Empire**

> **Founder**: David Daniels | **Location**: Edmond, Oklahoma
> **Contact**: david@hbuassetrecovery.us | **Website**: hbuassetrecovery.us
> **Vision**: $8.75M+ Revenue by 2027 | 99% Compliance | 90% Automation

---

## Table of Contents
1. [Executive Summary](#executive-summary)
2. [System Architecture](#system-architecture)
3. [Core Features (70+)](#core-features)
4. [Competitive Advantages](#competitive-advantages)
5. [Technical Implementation](#technical-implementation)
6. [API Integrations](#api-integrations)
7. [Workflows & Automation](#workflows-automation)
8. [Compliance & Ethics](#compliance-ethics)
9. [Revenue Model](#revenue-model)
10. [Deployment Guide](#deployment-guide)

---

## Executive Summary

HBU Asset Recovery is the **#1 AI-native, end-to-end asset recovery platform** that automates the complete pipeline from lead discovery to claim filing to payout. Unlike competitors (Kelmar, UP Standard, HRS Pro, Simple Escheat, UP Navigator) who focus solely on reporting and forms, HBU delivers a **full AI revenue engine**.

### Key Metrics
- **Automation**: 90% end-to-end (vs. 50% manual for competitors)
- **Speed**: 30-day claims (vs. 90+ days industry standard)
- **Compliance**: 99% TCPA/FDCPA/CCPA accuracy (zero lawsuits)
- **Response Rate**: 40% (vs. 15% industry average)
- **Enrichment**: 95% contact hit rate across 12+ skip trace APIs
- **Cost**: $0.10/match bulk enrichment (vs. $0.50+ competitors)
- **Revenue Target**: $8.75M by 2027 (OK+CA+FL+TX expansion)

### The Moat
- **Only platform** with self-healing AI templates (95% unique messages)
- **Only platform** with blockchain bounty system (viral 5x lead generation)
- **Only platform** with full 50-state automation (ARU swarms)
- **Only platform** with Ethics NFT guarantees (70% close rate)

---

## System Architecture

### Pure TypeScript Monorepo
```
Frontend: Next.js 16 (App Router) + React + Tailwind + Shadcn UI
Backend: Next.js API Routes (TypeScript serverless functions)
Database: Prisma + Neon Postgres
Auth: Clerk
AI: OpenAI, Grok, Perplexity (multi-provider fallback)
Monitoring: Sentry + Vercel Analytics
Deployment: Vercel (edge-ready, 99.9% uptime)
Orchestration: n8n / Make.com (external workflows)
```

### Four-Pillar Architecture
1. **Frontend & Core DB**: User dashboard, lead management, auth
2. **Backend Services**: AI routing, scraping, communications, enrichment
3. **Orchestration Layer**: n8n/Make workflows for complex multi-step automation
4. **External Triggers**: Telegram bot, Google Drive, cron jobs, webhooks

---

## Core Features (70+)

### Lead Generation Engine
| Feature | Description | Value |
|---------|-------------|-------|
| **ARU Swarm** | Auto-parallel scraping of OSCN, FLTreasureHunt, SCO, 50-state databases | 5,000+ leads/month, 80% high-value ($10K+) |
| **Quantum Predictor** | Grok-1 AI forecasts 30-day surplus based on equity/liens | 80% accuracy, preemptive targeting |
| **50-State Database Links** | Built-in direct URLs to all state unclaimed property databases | Auto-search via MissingMoney.com integration |
| **County Drone** | Automated scraping for 67 Florida counties + national replication | 90% faster discovery vs. manual |

### Data Enrichment Arsenal
| Provider | Capability | Cost | Priority |
|----------|------------|------|----------|
| **PropStream** | ARV calculator, lead automator, free DNC/litigator scrub, 160M+ properties | $99/mo + $0.10/match | 🔴 High |
| **BatchSkipTracing** | Bulk API (100x/request), 95% accuracy, DNC/compliance flags | $0.10/match | 🔴 High |
| **Skip Genie** | Unlimited searches, property nexus (associated homes), 90% accuracy | $99/mo (Perfectionist) | 🔴 High |
| **Tracerfy** | 97% hit rate, phone/email/relatives | Pay-per-use | 🟡 Medium |
| **Endato** | Real-time enrichment, Oklahoma-focused | API-based | 🔴 High |
| **REsimpli** | CRM sync for real estate workflows | Subscription | 🟡 Medium |
| **Mojo Dialer** | Phone verification + dialer integration | Subscription | 🟡 Medium |
| **Skip Force** | Dual database sources | Pay-per-use | 🟡 Medium |
| **Accurate Append** | Real-time API enrichment | API-based | 🟡 Medium |
| **TPS/FPS Scrapers** | Fallback manual scraping (TruePeopleSearch, FastPeopleSearch) | Free | 🟢 Low |

**Cascade System**: 8x fallback chain ensures 99.9% enrichment uptime

### Outreach Sovereignty
| Feature | Description | Impact |
|---------|-------------|--------|
| **Self-Healing Templates** | Grok-1/BERT generates 95% unique messages, adapts on failure | 40% response rate vs. 15% static |
| **Sovereign SMS Engine** | TCPA 2025 compliant: consent timestamps, 8AM-9PM quiet hours, <3/week frequency caps | <1% opt-out rate |
| **Sovereign Email Engine** | CAN-SPAM compliant: 30-day unsubscribe, physical address, <1/week frequency | 100% deliverability |
| **Bland AI Integration** | AI-powered cold calling with dynamic scripts | 70% connect rate |
| **Multi-Channel Sequencing** | SMS → Email → Call automation based on response | 2x conversion vs. single-channel |

### Compliance Bastion
| Component | Purpose | Assurance |
|-----------|---------|-----------|
| **AI Legal Engine** | 99% TCPA/FDCPA/CCPA compliance scanning | Zero lawsuits to date |
| **Ethics Shield** | Blocks grief exploitation, vulnerable populations | 70% close rate on scanned leads |
| **Quarterly DNC Scrubs** | DoNotCall.gov API integration ($0.005/number) | Hands-free compliance |
| **Litigator Flags** | Auto-detection via PropStream/BatchSkip | Prevents high-risk contacts |
| **Audit Logs** | Full Sentry + Supabase logging for regulatory review | TCPA audit-ready |

### Filing Dominion
- **Paperwork Bot**: 50-state form generation (FL §45.032, CA unclaimed property, OK 12A O.S.)
- **Auto-Filer**: DocuSign integration + email submission to county clerks
- **Status Tracker**: Real-time claim status monitoring via ARU drones
- **Result**: 90% faster filing (30 days vs. 90+), 98% success rate

### Revenue Singularity
- **HBU Bounty Chain**: Polygon blockchain with $50-$500/lead bounties
- **NFT Badges**: On-chain proof of ethics compliance (shareable for viral trust)
- **National ARU Replication**: Auto-scale to 20 states by 2027
- **Viral Effect**: 5x lead generation through affiliate bounty system

### Knowledge & Tools
- **Supabase Knowledge Base**: Grok-1 Q&A on 50-state statutes, instant answers
- **Company Docs Repository**: GitHub-hosted ethics playbooks, Mermaid workflow diagrams, compliance checklists
- **AI Paralegal 24/7**: Instant statute lookups (e.g., "What's FL foreclosure surplus deadline?")
- **Empire Dashboard**: Real-time ARU map, $8.75M revenue run rate projection, Recovery Score (92/100)

---

## Competitive Advantages

### HBU vs. The Competition

| Feature | HBU | Kelmar | UP Standard | HRS Pro | Simple Escheat | UP Navigator |
|---------|-----|--------|-------------|---------|----------------|--------------|
| **AI Automation** | 90% end-to-end | 0% (manual) | 0% (manual) | 0% (forms only) | 0% (DIY scanning) | 50% (workflows) |
| **Skip Tracing** | 12+ APIs, 8x cascade | None | Manual imports | None | None | Basic |
| **Compliance Engine** | 99% AI scans | Manual audits | Manual audits | Templates only | None | Basic |
| **Outreach** | Self-healing (95% unique) | None | Static templates | None | None | Static |
| **Filing Automation** | 50-state auto-file | Forms only | Forms only | NAUPA forms | None | Forms only |
| **Bounty System** | Blockchain + NFT | None | None | None | None | None |
| **Cost** | $0.10/match, 25% contingency | $1K+/year upfront | $500-$2K/year | $450/year | $300-$1K/year | $600+/year |
| **Speed** | 30-day claims | 90+ days | 90+ days | N/A (forms only) | 90+ days | 60+ days |
| **Revenue Potential** | $8.75M by 2027 | Reporting fee only | Reporting fee only | Form fee only | Low volume | Moderate |

### Why HBU Wins
1. **Full Pipeline Automation**: Only platform covering predict → enrich → outreach → file → payout
2. **AI-Native**: Self-healing templates, quantum predictor, ethics shield—no manual intervention
3. **Bulk-Ready**: Handle 10K+ leads/day with 99.9% uptime via cascade fallbacks
4. **Compliance Fortress**: Zero lawsuits, quarterly scrubs, NFT guarantees = 70% trust lift
5. **Viral Growth**: Bounty chain generates 5x leads through on-chain transparency
6. **No Upfront Risk**: 25% contingency only (competitors charge $300-$2K/year upfront)

---

## Technical Implementation

### Project Structure
```typescript
recovery-forge/
├── app/
│ ├── (app)/
│ │ ├── page.tsx // Main dashboard
│ │ ├── leads/[id]/page.tsx // Lead detail
│ │ └── chat/page.tsx // AI command center
│ ├── api/
│ │ ├── webhooks/
│ │ │ ├── telegram/route.ts // Telegram bot
│ │ │ ├── bland/route.ts // Call webhook
│ │ │ └── clerk/route.ts // User sync
│ │ └── command/
│ │ ├── ai-route/route.ts // Intent parser
│ │ ├── skiptrace/route.ts // Enrichment
│ │ ├── comms/route.ts // SMS/Email/Call
│ │ ├── delegate/route.ts // Trello/HubSpot
│ │ └── storage/route.ts // Drive/Sheets
│ ├── layout.tsx
│ └── globals.css
├── lib/
│ ├── prisma.ts // Database client
│ ├── ai-router.ts // Multi-provider AI
│ ├── skip-cascade.ts // 8x fallback enrichment
│ ├── compliance.ts // TCPA/DNC engine
│ ├── self-healing.ts // Template adaptation
│ └── errors.ts // Sentry integration
├── prisma/
│ └── schema.prisma // Complete schema
├── components/ui/ // Shadcn components
└── public/
```

### Database Schema (Prisma)
```prisma
model Lead {
id String @id @default (cuid())

index.html

@@ -1,50 +1,28 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HBU Asset Recovery</title>
+    <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/vanta@latest/dist/vanta.globe.min.js"></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', // orange-500
-                        secondary: '#f97316', // orange-500
+                        primary: '#f97316',
+                        secondary: '#f97316',
                     }
                 }
             }
         }
     </script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background-color: #0f172a;
-            color: #e2e8f0;
-        }
-        .hero-bg {
-            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%), url('http://static.photos/abstract/1200x630/42') no-repeat center center;
-            background-size: cover;
-        }
-        .service-card {
-            transition: all 0.3s ease;
-            border: 1px solid rgba(249, 115, 22, 0.2);
-        }
-        .service-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.25);
-            border-color: rgba(249, 115, 22, 0.5);
-        }
-        .stat-card {
-            border: 1px solid rgba(249, 115, 22, 0.3);
-        }
-    </style>
 </head>
 <body class="bg-slate-900 text-slate-100">
     <!-- Navigation -->
@@ -59,266 +37,249 @@
                 </div>
                 <div class="hidden md:block">
                     <div class="ml-10 flex items-baseline space-x-4">
-                        <a href="#" class="bg-orange-500 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
-                        <a href="#" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
-                        <a href="#" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
-                        <a href="#" class="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
+                        <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="md:hidden">
-                    <button id="mobile-menu-button" class="text-slate-400 hover:text-white">
-                        <i data-feather="menu" class="h-6 w-6"></i>
+                <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>
 
-    <!-- Hero Section -->
-    <div class="hero-bg h-screen flex items-center">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6">
-                <span class="block">Asset Recovery</span>
-                <span class="block text-orange-500 mt-2">Done Right</span>
-            </h1>
-            <p class="mt-4 max-w-2xl text-xl text-slate-300 mx-auto">
-                Professional asset recovery services with proven results and maximum return on investment.
-            </p>
-            <div class="mt-10">
-                <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-orange-500 hover:bg-orange-600">
-                    Get Started
-                    <i data-feather="arrow-right" class="ml-2 -mr-1 h-5 w-5"></i>
-                </a>
-                <a href="#" class="ml-4 inline-flex items-center px-6 py-3 border border-orange-500 text-base font-medium rounded-md text-orange-500 bg-transparent hover:bg-slate-800">
-                    Learn More
-                </a>
+    <!-- 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>
-    </div>
 
-    <!-- Stats Section -->
-    <div class="py-12 bg-slate-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-                <div class="stat-card bg-slate-900 rounded-lg p-6 text-center">
-                    <p class="text-5xl font-extrabold text-orange-500">$2.4B+</p>
-                    <p class="mt-2 text-lg font-medium text-slate-300">Assets Recovered</p>
+        <!-- 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 class="stat-card bg-slate-900 rounded-lg p-6 text-center">
-                    <p class="text-5xl font-extrabold text-orange-500">98%</p>
-                    <p class="mt-2 text-lg font-medium text-slate-300">Success Rate</p>
+            </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 class="stat-card bg-slate-900 rounded-lg p-6 text-center">
-                    <p class="text-5xl font-extrabold text-orange-500">15+</p>
-                    <p class="mt-2 text-lg font-medium text-slate-300">Years Experience</p>
+            </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 class="stat-card bg-slate-900 rounded-lg p-6 text-center">
-                    <p class="text-5xl font-extrabold text-orange-500">500+</p>
-                    <p class="mt-2 text-lg font-medium text-slate-300">Clients Served</p>
+            </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>
-    </div>
 
-    <!-- Services Section -->
-    <div class="py-16 bg-slate-900">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center">
-                <h2 class="text-base font-semibold text-orange-500 tracking-wide uppercase">Our Services</h2>
-                <p class="mt-2 text-3xl font-extrabold text-white sm:text-4xl">Comprehensive Asset Recovery</p>
-                <p class="mt-4 max-w-2xl text-xl text-slate-400 mx-auto">
-                    We provide end-to-end solutions for all your asset recovery needs.
-                </p>
-            </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>
 
-            <div class="mt-16">
-                <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-                    <!-- Service 1 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="dollar-sign" class="h-6 w-6"></i>
+                <!-- 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="mt-5">
-                            <h3 class="text-lg font-medium text-white">Financial Recovery</h3>
-                            <p class="mt-2 text-slate-400">
-                                Specialized recovery of financial assets including unpaid debts, insurance claims, and investment losses.
-                            </p>
+                        
+                        <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>
-
-                    <!-- Service 2 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="home" class="h-6 w-6"></i>
+                        
+                        <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="mt-5">
-                            <h3 class="text-lg font-medium text-white">Real Estate Recovery</h3>
-                            <p class="mt-2 text-slate-400">
-                                Expert recovery of real estate assets including foreclosed properties and distressed real estate.
-                            </p>
+                        
+                        <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>
 
-                    <!-- Service 3 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="briefcase" class="h-6 w-6"></i>
-                        </div>
-                        <div class="mt-5">
-                            <h3 class="text-lg font-medium text-white">Commercial Assets</h3>
-                            <p class="mt-2 text-slate-400">
-                                Recovery of commercial assets including equipment, inventory, and business assets.
-                            </p>
-                        </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>
 
-                    <!-- Service 4 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="users" class="h-6 w-6"></i>
+                <!-- 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="mt-5">
-                            <h3 class="text-lg font-medium text-white">Legal Recovery</h3>
-                            <p class="mt-2 text-slate-400">
-                                Legal asset recovery services with experienced attorneys and legal professionals.
-                            </p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-slate-400">FDCPA Compliance</span>
+                            <span class="text-green-400">100%</span>
                         </div>
-                    </div>
-
-                    <!-- Service 5 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="globe" class="h-6 w-6"></i>
+                        <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="mt-5">
-                            <h3 class="text-lg font-medium text-white">International Recovery</h3>
-                            <p class="mt-2 text-slate-400">
-                                Cross-border asset recovery with global network and international expertise.
-                            </p>
+                        <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>
 
-                    <!-- Service 6 -->
-                    <div class="service-card bg-slate-800 rounded-lg p-6">
-                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
-                            <i data-feather="shield" class="h-6 w-6"></i>
-                        </div>
-                        <div class="mt-5">
-                            <h3 class="text-lg font-medium text-white">Fraud Recovery</h3>
-                            <p class="mt-2 text-slate-400">
-                                Specialized recovery of assets lost to fraud, embezzlement, and financial crimes.
-                            </p>
+                <!-- 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>
-    </div>
+    </main>
 
-    <!-- CTA Section -->
-    <div class="bg-gradient-to-r from-slate-800 to-slate-900">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
-            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
-                <span class="block">Ready to recover your assets?</span>
-                <span class="block text-orange-500">Contact us today.</span>
-            </h2>
-            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-                <div class="inline-flex rounded-md shadow">
-                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-orange-500 hover:bg-orange-600">
-                        Get Started
-                    </a>
-                </div>
-                <div class="ml-3 inline-flex rounded-md shadow">
-                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-orange-500 text-base font-medium rounded-md text-orange-500 bg-transparent hover:bg-slate-800">
-                        Learn more
-                    </a>
-                </div>
+    <!-- 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>
-    </div>
-
-    <!-- Footer -->
-    <footer class="bg-slate-800">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-            <div class="xl:grid xl:grid-cols-3 xl:gap-8">
-                <div class="space-y-8 xl:col-span-1">
-                    <div class="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>
-                    <p class="text-slate-400 text-base">
-                        Professional asset recovery services with proven results and maximum return on investment.
-                    </p>
-                    <div class="flex space-x-6">
-                        <a href="#" class="text-slate-400 hover:text-orange-500">
-                            <i data-feather="facebook" class="h-6 w-6"></i>
-                        </a>
-                        <a href="#" class="text-slate-400 hover:text-orange-500">
-                            <i data-feather="twitter" class="h-6 w-6"></i>
-                        </a>
-                        <a href="#" class="text-slate-400 hover:text-orange-500">
-                            <i data-feather="linkedin" class="h-6 w-6"></i>
-                        </a>
-                    </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 class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
-                    <div class="md:grid md:grid-cols-2 md:gap-8">
-                        <div>
-                            <h3 class="text-sm font-semibold text-slate-300 tracking-wider uppercase">Services</h3>
-                            <ul class="mt-4 space-y-4">
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Financial Recovery</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Real Estate Recovery</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Commercial Assets</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Legal Recovery</a></li>
-                            </ul>
-                        </div>
-                        <div class="mt-12 md:mt-0">
-                            <h3 class="text-sm font-semibold text-slate-300 tracking-wider uppercase">Support</h3>
-                            <ul class="mt-4 space-y-4">
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Pricing</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Documentation</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Guides</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">API Status</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="md:grid md:grid-cols-2 md:gap-8">
-                        <div>
-                            <h3 class="text-sm font-semibold text-slate-300 tracking-wider uppercase">Company</h3>
-                            <ul class="mt-4 space-y-4">
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">About</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Blog</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Jobs</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Press</a></li>
-                            </ul>
-                        </div>
-                        <div class="mt-12 md:mt-0">
-                            <h3 class="text-sm font-semibold text-slate-300 tracking-wider uppercase">Legal</h3>
-                            <ul class="mt-4 space-y-4">
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Privacy</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Terms</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Compliance</a></li>
-                                <li><a href="#" class="text-base text-slate-400 hover:text-orange-500">Licenses</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="mt-12 border-t border-slate-700 pt-8">
-                <p class="text-base text-slate-400 xl:text-center">&copy; 2023 HBU Asset Recovery. All rights reserved.</p>
             </div>
         </div>
-    </footer>
+    </div>
 
-    <script>
-        feather.replace();
-        
-        // Mobile menu toggle
-        const mobileMenuButton = document.getElementById('mobile-menu-button');
-        mobileMenuButton.addEventListener('click', () => {
-            const menu = document.querySelector('.mobile-menu');
-            menu.classList.toggle('hidden');
-        });
-    </script>
+    <script src="script.js"></script>
 </body>
 </html>

leads.html

@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leads Management - HBU Asset Recovery</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>
+    <link rel="stylesheet" href="style.css">
+</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="text-slate-300 hover:bg-slate-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
+                        <a href="leads.html" class="bg-orange-500 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>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Header Section -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-white">Lead Management</h1>
+                <p class="text-slate-400 mt-1">Manage and track all asset recovery leads</p>
+            </div>
+            <button onclick="openAddLeadModal()" class="btn btn-primary">
+                <i data-feather="plus" class="h-4 w-4 mr-2"></i>
+                Add New Lead
+            </button>
+        </div>
+
+        <!-- Filters and Search -->
+        <div class="bg-slate-800 rounded-lg p-6 mb-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div>
+                    <input type="text" id="search-input" placeholder="Search leads..." 
+                           class="form-input" onkeyup="filterLeads()">
+                </div>
+                <div>
+                    <select id="status-filter" class="form-input" onchange="filterLeads()">
+                        <option value="">All Statuses</option>
+                        <option value="NEW">New</option>
+                        <option value="ENRICHED">Enriched</option>
+                        <option value="CONTACTED">Contacted</option>
+                        <option value="NEGOTIATING">Negotiating</option>
+                        <option value="CLAIM_FILED">Claim Filed</option>
+                        <option value="RECOVERED">Recovered</option>
+                    </select>
+                </div>
+                <div>
+                    <select id="state-filter" class="form-input" onchange="filterLeads()">
+                        <option value="">All States</option>
+                        <option value="OK">Oklahoma</option>
+                        <option value="FL">Florida</option>
+                        <option value="TX">Texas</option>
+                        <option value="CA">California</option>
+                    </select>
+                </div>
+                <div>
+                    <select id="value-filter" class="form-input" onchange="filterLeads()">
+                        <option value="">All Values</option>
+                        <option value="0-10000">$0 - $10K</option>
+                        <option value="10000-50000">$10K - $50K</option>
+                        <option value="50000-100000">$50K - $100K</option>
+                        <option value="100000+">$100K+</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Leads Table -->
+        <div class="bg-slate-800 rounded-lg overflow-hidden">
+            <div class="overflow-x-auto">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Lead</th>
+                            <th>Contact</th>
+                            <th>Claim Amount</th>
+                            <th>ARV</th>
+                            <th>Equity %</th>
+                            <th>Status</th>
+                            <th>Score</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leads-table-body">
+                        <!-- Leads will be loaded here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Pagination -->
+        <div class="flex items-center justify-between mt-6">
+            <div class="text-slate-400">
+                Showing <span id="showing-start">1</span> to <span id="showing-end">10</span> of <span id="total-leads">2,847</span> leads
+            </div>
+            <div class="flex space-x-2">
+                <button onclick="changePage(-1)" class="btn btn-secondary">Previous</button>
+                <button onclick="changePage(1)" class="btn btn-secondary">Next</button>
+            </div>
+        </div>
+    </main>
+
+    <!-- Add Lead Modal -->
+    <div id="add-lead-modal" class="modal hidden">
+        <div class="modal-content max-w-2xl">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-white">Add New Lead</h2>
+                <button onclick="closeAddLeadModal()" class="text-slate-400 hover:text-white">
+                    <i data-feather="x" class="h-6 w-6"></i>
+                </button>
+            </div>
+            
+            <form id="add-lead-form" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="form-group">
+                        <label class="form-label">First Name *</label>
+                        <input type="text" name="firstName" class="form-input" required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Last Name *</label>
+                        <input type="text" name="lastName" class="form-input" required>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="form-group">
+                        <label class="form-label">Phone</label>
+                        <input type="tel" name="phone" class="form-input">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Email</label>
+                        <input type="email" name="email" class="form-input">
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label">Address</label>
+                    <input type="text" name="address" class="form-input">
+                </div>
+                
+                <div class="grid grid-cols-3 gap-4">
+                    <div class="form-group">
+                        <label class="form-label">City</label>
+                        <input type="text" name="city" class="form-input">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">State</label>
+                        <select name="state" class="form-input">
+                            <option value="OK">Oklahoma</option>
+                            <option value="FL">Florida</option>
+                            <option value="TX">Texas</option>
+                            <option value="CA">California</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">ZIP</label>
+                        <input type="text" name="zip" class="form-input">
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="form-group">
+                        <label class="form-label">Claim Amount</label>
+                        <input type="number" name="claimAmount" class="form-input" step="0.01">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Source</label>
+                        <select name="source" class="form-input">
+                            <option value="OSCN">OSCN</option>
+                            <option value="FLTreasure">FL Treasury</option>
+                            <option value="Manual">Manual</option>
+                            <option value="Referral">Referral</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="flex justify-end space-x-4 mt-6">
+                    <button type="button" onclick="closeAddLeadModal()" class="btn btn-secondary">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Add Lead</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        // Lead management functionality
+        class LeadManager {
+            constructor() {
+                this.leads = [];
+                this.filteredLeads = [];
+                this.currentPage = 1;
+                this.leadsPerPage = 10;
+                this.loadLeads();
+            }
+
+            async loadLeads() {
+                try {
+                    // Mock data - in real implementation, fetch from API
+                    this.leads = [
+                        {
+                            id: '1',
+                            firstName: 'John',
+                            lastName: 'Doe',
+                            phone: '(555) 123-4567',
+                            email: 'john.doe@email.com',
+                            claimAmount: 45000,
+                            arv: 250000,
+                            equity: 78,
+                            status: 'NEGOTIATING',
+                            recoveryScore: 92,
+                            state: 'OK'
+                        },
+                        {
+                            id: '2',
+                            firstName: 'Jane',
+                            lastName: 'Smith',
+                            phone: '(555) 987-6543',
+                            email: 'jane.smith@email.com',
+                            claimAmount: 120000,
+                            arv: 450000,
+                            equity: 85,
+                            status: 'CONTACTED',
+                            recoveryScore: 88,
+                            state: 'FL'
+                        },
+                        {
+                            id: '3',
+                            firstName: 'Robert',
+                            lastName: 'Johnson',
+                            phone: '(555) 456-7890',
+                            email: 'robert.j@email.com',
+                            claimAmount: 35000,
+                            arv: 180000,
+                            equity: 65,
+                            status: 'ENRICHED',
+                            recoveryScore: 75,
+                            state: 'TX'
+                        }
+                    ];
+                    
+                    this.filteredLeads = [...this.leads];
+                    this.renderLeads();
+                } catch (error) {
+                    console.error('Failed to load leads:', error);
+                    showToast('Failed to load leads', 'error');
+                }
+            }
+
+            renderLeads() {
+                const tbody = document.getElementById('leads-table-body');
+                if (!tbody) return;
+
+                const start = (this.currentPage - 1) * this.leadsPerPage;
+                const end = start + this.leadsPerPage;
+                const pageLeads = this.filteredLeads.slice(start, end);
+
+                tbody.innerHTML = pageLeads.map(lead => `
+                    <tr class="hover:bg-slate-700/50">
+                        <td>
+                            <div class="flex items-center">
+                                <img class="h-8 w-8 rounded-full mr-3" src="http://static.photos/people/40x40/${lead.id}" alt="${lead.firstName}">
+                                <div>
+                                    <div class="text-white font-medium">${lead.firstName} ${lead.lastName}</div>
+                                    <div class="text-slate-400 text-sm">${lead.state}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="text-slate-300">${lead.phone}</div>
+                            <div class="text-slate-400 text-sm">${lead.email}</div>
+                        </td>
+                        <td class="text-white font-medium">$${lead.claimAmount.toLocaleString()}</td>
+                        <td class="text-slate-300">$${lead.arv.toLocaleString()}</td>
+                        <td>
+                            <div class="flex items-center">
+                                <div class="w-16 bg-slate-700 rounded-full h-2 mr-2">
+                                    <div class="bg-orange-500 h-2 rounded-full" style="width: ${lead.equity}%"></div>
+                                </div>
+                                <span class="text-slate-300">${lead.equity}%</span>
+                            </div>
+                        </td>
+                        <td>
+                            <span class="badge badge-${this.getStatusColor(lead.status)}">${lead.status}</span>
+                        </td>
+                        <td>
+                            <div class="text-white font-medium">${lead.recoveryScore}</div>
+                            <div class="text-slate-400 text-sm">Score</div>
+                        </td>
+                        <td>
+                            <div class="flex space-x-2">
+                                <button onclick="viewLead('${lead.id}')" class="text-blue-400 hover:text-blue-300">
+                                    <i data-feather="eye" class="h-4 w-4"></i>
+                                </button>
+                                <button onclick="skipTraceLead('${lead.id}')" class="text-green-400 hover:text-green-300">
+                                    <i data-feather="search" class="h-4 w-4"></i>
+                                </button>
+                                <button onclick="contactLead('${lead.id}')" class="text-orange-400 hover:text-orange-300">
+                                    <i data-feather="phone" class="h-4 w-4"></i>
+                                </button>
+                                <button onclick="editLead('${lead.id}')" class="text-slate-400 hover:text-slate-300">
+                                    <i data-feather="edit" class="h-4 w-4"></i>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                `).join('');
+
+                feather.replace();
+                this.updatePagination();
+            }
+
+            getStatusColor(status) {
+                const colors = {
+                    'NEW': 'info',
+                    'ENRICHED': 'warning',
+                    'CONTACTED': 'info',
+                    'NEGOTIATING': 'warning',
+                    'CLAIM_FILED': 'info',
+                    'RECOVERED': 'success'
+                };
+                return colors[status] || 'info';
+            }
+
+            updatePagination() {
+                const total = this.filteredLeads.length;
+                const start = (this.currentPage - 1) * this.leadsPerPage + 1;
+                const end = Math.min(this.currentPage * this.leadsPerPage, total);
+
+                document.getElementById('showing-start').textContent = start;
+                document.getElementById('showing-end').textContent = end;
+                document.getElementById('total-leads').textContent = total;
+            }
+
+            filter(search, status, state, valueRange) {
+                this.filteredLeads = this.leads.filter(lead => {
+                    const matchesSearch = !search || 
+                        `${lead.firstName} ${lead.lastName}`.toLowerCase().includes(search.toLowerCase()) ||
+                        lead.email?.toLowerCase().includes(search.toLowerCase()) ||
+                        lead.phone?.includes(search);
+                    
+                    const matchesStatus = !status || lead.status === status;
+                    const matchesState = !state || lead.state === state;
+                    
+                    let matchesValue = true;
+                    if (valueRange) {
+                        const [min, max] = valueRange.split('-').map(v => v === '+' ? Infinity : parseInt(v));
+                        matchesValue = lead.claimAmount >= min && lead.claimAmount <= max;
+                    }
+
+                    return matchesSearch && matchesStatus && matchesState && matchesValue;
+                });
+
+                this.currentPage = 1;
+                this.renderLeads();
+            }
+
+            async addLead(leadData) {
+                try {
+                    // In real implementation, send to API
+                    const newLead = {
+                        id: Date.now().toString(),
+                        ...leadData,
+                        status: 'NEW',
+                        recoveryScore: Math.floor(Math.random() * 30) + 70
+                    };
+
+                    this.leads.unshift(newLead);
+                    this.filteredLeads = [...this.leads];
+                    this.renderLeads();
+
+                    showToast('Lead added successfully', 'success');
+                    closeAddLeadModal();
+                } catch (error) {
+                    console.error('Failed to add lead:', error);
+                    showToast('Failed to add lead', 'error');
+                }
+            }
+        }
+
+        // Initialize lead manager
+        const leadManager = new LeadManager();
+
+        // Global functions
+        function filterLeads() {
+            const search = document.getElementById('search-input').value;
+            const status = document.getElementById('status-filter').value;
+            const state = document.getElementById('state-filter').value;
+            const valueRange = document.getElementById('value-filter').value;
+
+            leadManager.filter(search, status, state, valueRange);
+        }
+
+        function changePage(direction) {
+            const totalPages = Math.ceil(leadManager.filteredLeads.length / leadManager.leadsPerPage);
+            leadManager.currentPage = Math.max(1, Math.min(totalPages, leadManager.currentPage + direction));
+            leadManager.renderLeads();
+        }
+
+        function openAddLeadModal() {
+            document.getElementById('add-lead-modal').classList.remove('hidden');
+        }
+
+        function closeAddLeadModal() {
+            document.getElementById('add-lead-modal').classList.add('hidden');
+            document.getElementById('add-lead-form').reset();
+        }
+
+        function viewLead(id) {
+            showToast(`Viewing lead ${id}`, 'info');
+        }
+
+        function skipTraceLead(id) {
+            showToast(`Skip tracing lead ${id}`, 'info');
+        }
+
+        function contactLead(id) {
+            showToast(`Contacting lead ${id}`, 'info');
+        }
+
+        function editLead(id) {
+            showToast(`Editing lead ${id}`, 'info');
+        }
+
+        // Form submission
+        document.getElementById('add-lead-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const leadData = Object.fromEntries(formData.entries());
+            
+            await leadManager.addLead(leadData);
+        });
+    </script>
+</body>
+</html>

script.js

@@ -0,0 +1,351 @@
+// Initialize Feather Icons
+feather.replace();
+
+// Dashboard functionality
+class HBUAssetRecovery {
+    constructor() {
+        this.initializeEventListeners();
+        this.initializeCharts();
+        this.startRealTimeUpdates();
+        this.loadDashboardData();
+    }
+
+    initializeEventListeners() {
+        // Telegram modal
+        const telegramBtn = document.getElementById('telegram-btn');
+        const telegramModal = document.getElementById('telegram-modal');
+        const closeTelegram = document.getElementById('close-telegram');
+        const sendCommand = document.getElementById('send-command');
+        const telegramInput = document.getElementById('telegram-input');
+
+        if (telegramBtn && telegramModal) {
+            telegramBtn.addEventListener('click', () => {
+                telegramModal.classList.remove('hidden');
+                telegramInput.focus();
+            });
+        }
+
+        if (closeTelegram) {
+            closeTelegram.addEventListener('click', () => {
+                telegramModal.classList.add('hidden');
+            });
+        }
+
+        if (sendCommand && telegramInput) {
+            sendCommand.addEventListener('click', () => {
+                this.handleTelegramCommand(telegramInput.value);
+            });
+
+            telegramInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.handleTelegramCommand(telegramInput.value);
+                }
+            });
+        }
+
+        // Close modal on outside click
+        telegramModal?.addEventListener('click', (e) => {
+            if (e.target === telegramModal) {
+                telegramModal.classList.add('hidden');
+            }
+        });
+    }
+
+    initializeCharts() {
+        // Pipeline Chart
+        const pipelineCtx = document.getElementById('pipelineChart');
+        if (pipelineCtx) {
+            new Chart(pipelineCtx.getContext('2d'), {
+                type: 'bar',
+                data: {
+                    labels: ['New', 'Enriched', 'Contacted', 'Negotiating', 'Claim Filed', 'Recovered'],
+                    datasets: [{
+                        label: 'Leads',
+                        data: [342, 287, 198, 124, 89, 67],
+                        backgroundColor: [
+                            'rgba(249, 115, 22, 0.8)',
+                            'rgba(59, 130, 246, 0.8)',
+                            'rgba(251, 191, 36, 0.8)',
+                            'rgba(168, 85, 247, 0.8)',
+                            'rgba(34, 197, 94, 0.8)',
+                            'rgba(16, 185, 129, 0.8)'
+                        ],
+                        borderColor: [
+                            'rgba(249, 115, 22, 1)',
+                            'rgba(59, 130, 246, 1)',
+                            'rgba(251, 191, 36, 1)',
+                            'rgba(168, 85, 247, 1)',
+                            'rgba(34, 197, 94, 1)',
+                            'rgba(16, 185, 129, 1)'
+                        ],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(148, 163, 184, 0.1)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        // Revenue Chart (if exists)
+        const revenueCtx = document.getElementById('revenueChart');
+        if (revenueCtx) {
+            new Chart(revenueCtx.getContext('2d'), {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                    datasets: [{
+                        label: 'Revenue',
+                        data: [380000, 410000, 395000, 425000, 440000, 416667],
+                        borderColor: 'rgba(249, 115, 22, 1)',
+                        backgroundColor: 'rgba(249, 115, 22, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: {
+                                color: 'rgba(148, 163, 184, 0.1)'
+                            },
+                            ticks: {
+                                color: '#94a3b8',
+                                callback: function(value) {
+                                    return '$' + (value / 1000) + 'K';
+                                }
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    async handleTelegramCommand(command) {
+        const responseDiv = document.getElementById('telegram-response');
+        const input = document.getElementById('telegram-input');
+
+        if (!command.trim()) return;
+
+        // Show loading state
+        responseDiv.innerHTML = '<div class="flex items-center"><div class="loading-spinner mr-3"></div>Processing command...</div>';
+        responseDiv.classList.remove('hidden');
+
+        try {
+            // Simulate API call to AI command center
+            const response = await fetch('/api/command/ai-route', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ command })
+            });
+
+            const result = await response.json();
+            
+            if (response.ok) {
+                responseDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <i data-feather="check-circle" class="text-green-400 mr-2 mt-1 h-4 w-4"></i>
+                        <div>
+                            <p class="text-green-400 font-medium">Command processed successfully</p>
+                            <p class="mt-1">${result.response}</p>
+                        </div>
+                    </div>
+                `;
+                input.value = '';
+                this.showToast('Command executed successfully', 'success');
+            } else {
+                throw new Error(result.error || 'Command failed');
+            }
+        } catch (error) {
+            responseDiv.innerHTML = `
+                <div class="flex items-start">
+                    <i data-feather="alert-circle" class="text-red-400 mr-2 mt-1 h-4 w-4"></i>
+                    <div>
+                        <p class="text-red-400 font-medium">Error processing command</p>
+                        <p class="mt-1">${error.message}</p>
+                    </div>
+                </div>
+            `;
+            this.showToast('Command failed: ' + error.message, 'error');
+        }
+
+        // Re-initialize feather icons
+        feather.replace();
+    }
+
+    async loadDashboardData() {
+        try {
+            // Simulate loading dashboard data
+            const dashboardData = await this.fetchDashboardMetrics();
+            this.updateDashboardUI(dashboardData);
+        } catch (error) {
+            console.error('Failed to load dashboard data:', error);
+        }
+    }
+
+    async fetchDashboardMetrics() {
+        // Mock data - in real implementation, this would call your API
+        return {
+            monthlyRevenue: 416667,
+            activeLeads: 2847,
+            successRate: 98.2,
+            aruStatus: 'Active',
+            recentActivity: [
+                { type: 'success', message: 'Claim Approved - $45,000', details: 'John Doe - Oklahoma County', time: '2 min ago' },
+                { type: 'warning', message: 'New High-Value Lead', details: 'ARV $350K - Equity 78%', time: '15 min ago' },
+                { type: 'info', message: 'ARU Swarm Completed', details: '1,247 leads processed - FL', time: '1 hour ago' },
+                { type: 'info', message: 'AI Call Campaign Sent', details: '234 contacts - 67% answer rate', time: '2 hours ago' }
+            ]
+        };
+    }
+
+    updateDashboardUI(data) {
+        // Update metrics
+        const elements = {
+            monthlyRevenue: document.querySelector('[data-metric="revenue"]'),
+            activeLeads: document.querySelector('[data-metric="leads"]'),
+            successRate: document.querySelector('[data-metric="success"]'),
+            aruStatus: document.querySelector('[data-metric="aru-status"]')
+        };
+
+        if (elements.monthlyRevenue) {
+            elements.monthlyRevenue.textContent = this.formatCurrency(data.monthlyRevenue);
+        }
+        if (elements.activeLeads) {
+            elements.activeLeads.textContent = data.activeLeads.toLocaleString();
+        }
+        if (elements.successRate) {
+            elements.successRate.textContent = data.successRate + '%';
+        }
+    }
+
+    formatCurrency(amount) {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+            minimumFractionDigits: 0
+        }).format(amount);
+    }
+
+    startRealTimeUpdates() {
+        // Simulate real-time updates
+        setInterval(() => {
+            this.updateRealTimeMetrics();
+        }, 30000); // Update every 30 seconds
+    }
+
+    updateRealTimeMetrics() {
+        // Simulate small changes in metrics
+        const revenueElement = document.querySelector('[data-metric="revenue"]');
+        if (revenueElement) {
+            const currentRevenue = parseInt(revenueElement.textContent.replace(/[$,]/g, ''));
+            const newRevenue = currentRevenue + Math.floor(Math.random() * 1000);
+            revenueElement.textContent = this.formatCurrency(newRevenue);
+        }
+    }
+
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+        toast.innerHTML = `
+            <div class="flex items-center">
+                <i data-feather="${this.getToastIcon(type)}" class="mr-2 h-5 w-5"></i>
+                <span>${message}</span>
+            </div>
+        `;
+        
+        document.body.appendChild(toast);
+        
+        // Trigger animation
+        setTimeout(() => toast.classList.add('show'), 100);
+        
+        // Remove after 3 seconds
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+        
+        feather.replace();
+    }
+
+    getToastIcon(type) {
+        switch(type) {
+            case 'success': return 'check-circle';
+            case 'error': return 'x-circle';
+            case 'warning': return 'alert-triangle';
+            default: return 'info';
+        }
+    }
+}
+
+// Utility functions
+const hbu = new HBUAssetRecovery();
+
+// Export for use in other scripts
+window.HBU = hbu;
+window.showToast = (message, type) => hbu.showToast(message, type);
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    // Ctrl/Cmd + K for quick search/commands
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('telegram-btn')?.click();
+    }
+    
+    // Escape to close modals
+    if (e.key === 'Escape') {
+        document.getElementById('telegram-modal')?.classList.add('hidden');
+    }
+});
+
+// Page visibility change handling
+document.addEventListener('visibilitychange', () => {
+    if (!document.hidden) {
+        hbu.loadDashboardData(); // Refresh data when page becomes visible
+    }
+});

style.css

@@ -1,28 +1,322 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background-color: #0f172a;
+    color: #e2e8f0;
+    line-height: 1.6;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
 
+@keyframes slideIn {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Card styles */
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+    background: #1e293b;
+    border: 1px solid #334155;
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    border-color: #f97316;
+    box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.1);
+    transform: translateY(-2px);
+}
+
+/* Button styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    text-decoration: none;
+    border: none;
+    outline: none;
+}
+
+.btn-primary {
+    background-color: #f97316;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #ea580c;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
+}
+
+.btn-secondary {
+    background-color: #374151;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background-color: #4b5563;
+}
+
+.btn-outline {
+    background-color: transparent;
+    border: 1px solid #f97316;
+    color: #f97316;
+}
+
+.btn-outline:hover {
+    background-color: #f97316;
+    color: white;
+}
+
+/* Status badges */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.badge-success {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.badge-warning {
+    background-color: rgba(251, 191, 36, 0.1);
+    color: #fbbf24;
+    border: 1px solid rgba(251, 191, 36, 0.2);
+}
+
+.badge-danger {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.badge-info {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+/* Form styles */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #d1d5db;
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #374151;
+    border: 1px solid #4b5563;
+    border-radius: 8px;
+    color: white;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: #f97316;
+    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+}
+
+.form-input::placeholder {
+    color: #9ca3af;
+}
+
+/* Table styles */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table th,
+.table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #374151;
+}
+
+.table th {
+    background-color: #1e293b;
+    font-weight: 600;
+    color: #d1d5db;
+}
+
+.table tbody tr:hover {
+    background-color: rgba(55, 65, 81, 0.5);
+}
+
+/* Loading spinner */
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #374151;
+    border-top: 4px solid #f97316;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background-color: #1e293b;
+    border-radius: 12px;
+    padding: 2rem;
+    max-width: 90%;
+    max-height: 90%;
+    overflow-y: auto;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Toast notification */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    padding: 1rem 1.5rem;
+    background-color: #1e293b;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
+    z-index: 1000;
+    transform: translateX(400px);
+    transition: transform 0.3s ease;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+.toast-success {
+    border-left: 4px solid #22c55e;
+}
+
+.toast-error {
+    border-left: 4px solid #ef4444;
+}
+
+.toast-warning {
+    border-left: 4px solid #fbbf24;
+}
+
+/* Utility classes */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.hidden { display: none; }
+.block { display: block; }
+.flex { display: flex; }
+.grid { display: grid; }
+
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+.rounded { border-radius: 0.25rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-xl { border-radius: 0.75rem; }
+
+.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
+.shadow-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+    .modal-content {
+        padding: 1rem;
+        margin: 1rem;
+    }
+    
+    .toast {
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+    }
 }