import React, { useState, useEffect } from 'react'; import { Filter, Users, TrendingUp, AlertCircle, Clock, Search, Briefcase, PieChart, MapPin, User, Download, ArrowUpDown } from 'lucide-react'; // Sample data for demonstration const generateProspects = () => { const companies = ['TechCorp', 'DataSystems', 'CloudNine', 'QuantumTech', 'DigitalWorks', 'AeroTech', 'VisionAI']; const titles = ['Senior Engineer', 'Product Manager', 'VP of Engineering', 'Director of Product', 'CTO', 'Technical Lead', 'Senior Developer']; const cities = ['San Francisco, CA', 'Seattle, WA', 'Austin, TX', 'Boston, MA', 'New York, NY', 'Denver, CO', 'Chicago, IL']; const sourceTypes = ['Recent Layoff', 'Retirement', 'Layoff', 'Retirement', 'Layoff', 'Retirement', 'Layoff']; const prospects = []; for (let i = 0; i < 100; i++) { const firstName = ['John', 'Emma', 'Michael', 'Sophia', 'William', 'Olivia', 'James', 'Ava', 'Robert', 'Isabella'][Math.floor(Math.random() * 10)]; const lastName = ['Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor'][Math.floor(Math.random() * 10)]; const companyIndex = Math.floor(Math.random() * companies.length); const daysAgo = Math.floor(Math.random() * 120); const date = new Date(); date.setDate(date.getDate() - daysAgo); prospects.push({ id: i + 1, name: `${firstName} ${lastName}`, title: titles[Math.floor(Math.random() * titles.length)], company: companies[companyIndex], location: cities[Math.floor(Math.random() * cities.length)], estimatedAssets: Math.floor(Math.random() * 5000000) + 200000, age: Math.floor(Math.random() * 30) + 35, eventDate: date, daysAgo, sourceType: sourceTypes[Math.floor(Math.random() * sourceTypes.length)], contactInfo: { email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`, phone: `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}` } }); } return prospects; }; const WealthManagementProspectTool = () => { const [prospects, setProspects] = useState([]); const [filteredProspects, setFilteredProspects] = useState([]); const [loading, setLoading] = useState(true); const [filters, setFilters] = useState({ ageMin: 35, ageMax: 70, assetsMin: 250000, daysAgo: 90, sourceType: 'all', searchTerm: '', location: '' }); const [sortConfig, setSortConfig] = useState({ key: 'daysAgo', direction: 'asc' }); const [selectedProspect, setSelectedProspect] = useState(null); const [stats, setStats] = useState({ totalProspects: 0, averageAssets: 0, layoffCount: 0, retirementCount: 0 }); // Load data useEffect(() => { setTimeout(() => { const data = generateProspects(); setProspects(data); setFilteredProspects(data); setLoading(false); // Calculate stats const layoffs = data.filter(p => p.sourceType === 'Layoff' || p.sourceType === 'Recent Layoff'); const retirements = data.filter(p => p.sourceType === 'Retirement'); const totalAssets = data.reduce((sum, p) => sum + p.estimatedAssets, 0); setStats({ totalProspects: data.length, averageAssets: Math.round(totalAssets / data.length), layoffCount: layoffs.length, retirementCount: retirements.length }); }, 1000); }, []); // Apply filters useEffect(() => { if (prospects.length === 0) return; let result = [...prospects]; // Age filter result = result.filter(p => p.age >= filters.ageMin && p.age <= filters.ageMax); // Assets filter result = result.filter(p => p.estimatedAssets >= filters.assetsMin); // Days ago filter result = result.filter(p => p.daysAgo <= filters.daysAgo); // Source type filter if (filters.sourceType !== 'all') { result = result.filter(p => p.sourceType === filters.sourceType); } // Location filter if (filters.location) { result = result.filter(p => p.location.toLowerCase().includes(filters.location.toLowerCase())); } // Search term filter if (filters.searchTerm) { const term = filters.searchTerm.toLowerCase(); result = result.filter(p => p.name.toLowerCase().includes(term) || p.company.toLowerCase().includes(term) || p.title.toLowerCase().includes(term) ); } // Sort results result.sort((a, b) => { if (sortConfig.key === 'name') { return sortConfig.direction === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); } else if (sortConfig.key === 'estimatedAssets') { return sortConfig.direction === 'asc' ? a.estimatedAssets - b.estimatedAssets : b.estimatedAssets - a.estimatedAssets; } else if (sortConfig.key === 'daysAgo') { return sortConfig.direction === 'asc' ? a.daysAgo - b.daysAgo : b.daysAgo - a.daysAgo; } return 0; }); setFilteredProspects(result); }, [prospects, filters, sortConfig]); const handleSort = (key) => { const direction = sortConfig.key === key && sortConfig.direction === 'asc' ? 'desc' : 'asc'; setSortConfig({ key, direction }); }; const formatCurrency = (value) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value); }; const handleFilterChange = (e) => { const { name, value } = e.target; setFilters(prev => ({ ...prev, [name]: name === 'ageMin' || name === 'ageMax' || name === 'assetsMin' || name === 'daysAgo' ? parseInt(value, 10) : value })); }; const handleProspectSelect = (prospect) => { setSelectedProspect(prospect); }; const handleExportToCRM = () => { alert(`Exported ${filteredProspects.length} prospects to CRM system`); }; const clearFilters = () => { setFilters({ ageMin: 35, ageMax: 70, assetsMin: 250000, daysAgo: 90, sourceType: 'all', searchTerm: '', location: '' }); }; return ( ); }; export default WealthManagementProspectTool;