SiteMente - AI-Powered Lead Generation Platform
Features: - Mission Control dashboard - HP Submissions tracking - AI Agents integration - Lead management CRM - Marketing email templates - Chrome extension support Tech: Next.js, TypeScript, Tailwind CSS, MySQL
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
'use client'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
interface Lead {
|
||||
id: number
|
||||
firstname: string
|
||||
lastname: string
|
||||
company: string
|
||||
email: string
|
||||
phone: string
|
||||
country: string
|
||||
status: string
|
||||
total_spent: string
|
||||
segment: string
|
||||
dormancy_flag: string
|
||||
email_status: string
|
||||
}
|
||||
|
||||
interface Pagination {
|
||||
page: number
|
||||
limit: number
|
||||
total: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
export default function HPLeadsPage() {
|
||||
const [leads, setLeads] = useState<Lead[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState('all')
|
||||
const [page, setPage] = useState(1)
|
||||
const [pagination, setPagination] = useState<Pagination>({ page: 1, limit: 100, total: 0, totalPages: 0 })
|
||||
const [search, setSearch] = useState('')
|
||||
const [showSearch, setShowSearch] = useState(false)
|
||||
const [jumpPage, setJumpPage] = useState('')
|
||||
const [sortBy, setSortBy] = useState('total_spent')
|
||||
const [sortOrder, setSortOrder] = useState('DESC')
|
||||
|
||||
useEffect(() => {
|
||||
fetchLeads()
|
||||
}, [filter, page, sortBy, sortOrder])
|
||||
|
||||
const fetchLeads = async () => {
|
||||
setLoading(true)
|
||||
const segmentParam = filter !== 'all' ? `&segment=${filter}` : ''
|
||||
const res = await fetch(`/api/mission-control/hp-leads?page=${page}&limit=100${segmentParam}&sortBy=${sortBy}&sortOrder=${sortOrder}`)
|
||||
const data = await res.json()
|
||||
setLeads(data.leads || [])
|
||||
setPagination(data.pagination || { page: 1, limit: 100, total: 0, totalPages: 0 })
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleSort = (column: string) => {
|
||||
if (sortBy === column) {
|
||||
setSortOrder(sortOrder === 'ASC' ? 'DESC' : 'ASC')
|
||||
} else {
|
||||
setSortBy(column)
|
||||
setSortOrder('DESC')
|
||||
}
|
||||
}
|
||||
|
||||
const handleJump = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const pageNum = parseInt(jumpPage)
|
||||
if (pageNum > 0 && pageNum <= pagination.totalPages) {
|
||||
setPage(pageNum)
|
||||
setJumpPage('')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setPage(1)
|
||||
fetchSearch()
|
||||
}
|
||||
|
||||
const fetchSearch = async () => {
|
||||
setLoading(true)
|
||||
const segmentParam = filter !== 'all' ? `&segment=${filter}` : ''
|
||||
const searchParam = search ? `&search=${encodeURIComponent(search)}` : ''
|
||||
const res = await fetch(`/api/mission-control/hp-leads?page=1&limit=100${segmentParam}${searchParam}&sortBy=${sortBy}&sortOrder=${sortOrder}`)
|
||||
const data = await res.json()
|
||||
setLeads(data.leads || [])
|
||||
setPagination(data.pagination || { page: 1, limit: 100, total: 0, totalPages: 0 })
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearch('')
|
||||
setFilter('all')
|
||||
setPage(1)
|
||||
fetchLeads()
|
||||
}
|
||||
|
||||
const SortIcon = ({ column }: { column: string }) => (
|
||||
<span style={{ marginLeft: '0.5rem', opacity: sortBy === column ? 1 : 0.3 }}>
|
||||
{sortBy === column && sortOrder === 'ASC' ? '↑' : '↓'}
|
||||
</span>
|
||||
)
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', background: '#0f172a', minHeight: '100vh', color: '#fff' }}>
|
||||
<div style={{ marginBottom: '2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: 'bold', margin: 0 }}>HP Leads</h1>
|
||||
<p style={{ color: '#64748b', margin: '0.5rem 0 0 0' }}>{pagination.total.toLocaleString()} total records</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: 'none',
|
||||
background: showSearch ? '#4169e1' : '#1e293b',
|
||||
color: '#fff',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
🔍 {showSearch ? 'Hide Search' : 'Search'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showSearch && (
|
||||
<form onSubmit={handleSearch} style={{ marginBottom: '1.5rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search name, email, company, phone..."
|
||||
style={{ flex: 1, padding: '0.75rem 1rem', borderRadius: '0.5rem', border: '1px solid #334155', background: '#1e293b', color: '#fff', minWidth: '200px' }}
|
||||
/>
|
||||
<button type="submit" style={{ padding: '0.75rem 1.5rem', borderRadius: '0.5rem', border: 'none', background: '#4169e1', color: '#fff', cursor: 'pointer' }}>Search</button>
|
||||
<button type="button" onClick={clearSearch} style={{ padding: '0.75rem 1.5rem', borderRadius: '0.5rem', border: 'none', background: '#334155', color: '#fff', cursor: 'pointer' }}>Clear</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '1.5rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<span style={{ color: '#64748b' }}>Filter:</span>
|
||||
{['all', 'VIP', 'Standard', 'Re-engage'].map(f => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => { setFilter(f); setPage(1); }}
|
||||
style={{ padding: '0.5rem 1rem', borderRadius: '0.5rem', border: 'none', background: filter === f ? '#4169e1' : '#1e293b', color: '#fff', cursor: 'pointer', fontWeight: filter === f ? 'bold' : 'normal' }}
|
||||
>
|
||||
{f === 'all' ? 'All' : f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ background: '#1e293b', borderRadius: '1rem', overflow: 'hidden' }}>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '900px' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#0f172a' }}>
|
||||
{['firstname', 'lastname', 'company', 'email', 'phone', 'country', 'total_spent', 'segment', 'dormancy_flag'].map(col => (
|
||||
<th
|
||||
key={col}
|
||||
onClick={() => handleSort(col)}
|
||||
style={{ padding: '1rem', textAlign: 'left', borderBottom: '1px solid #334155', cursor: 'pointer', userSelect: 'none' }}
|
||||
>
|
||||
<span style={{ color: '#64748b', fontSize: '0.85rem', fontWeight: 'bold', textTransform: 'uppercase' }}>
|
||||
{col === 'firstname' ? 'First Name' : col === 'lastname' ? 'Last Name' : col === 'company' ? 'Company' : col === 'email' ? 'Email' : col === 'phone' ? 'Phone' : col === 'country' ? 'Country' : col === 'total_spent' ? 'Spent' : col === 'segment' ? 'Segment' : col === 'dormancy_flag' ? 'Status' : col}
|
||||
<SortIcon column={col} />
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={9} style={{ padding: '3rem', textAlign: 'center', color: '#64748b' }}>Loading...</td></tr>
|
||||
) : leads.length === 0 ? (
|
||||
<tr><td colSpan={9} style={{ padding: '3rem', textAlign: 'center', color: '#64748b' }}>No results found</td></tr>
|
||||
) : leads.map(lead => (
|
||||
<tr key={lead.id} style={{ borderBottom: '1px solid #334155' }}>
|
||||
<td style={{ padding: '1rem' }}>{lead.firstname}</td>
|
||||
<td style={{ padding: '1rem' }}>{lead.lastname}</td>
|
||||
<td style={{ padding: '1rem' }}>{lead.company || '-'}</td>
|
||||
<td style={{ padding: '1rem', color: '#5bc0de' }}>{lead.email}</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem' }}>{lead.phone || '-'}</td>
|
||||
<td style={{ padding: '1rem' }}>{lead.country}</td>
|
||||
<td style={{ padding: '1rem', color: '#10b981', fontWeight: 'bold' }}>${Number(lead.total_spent).toFixed(2)}</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<span style={{ padding: '0.25rem 0.75rem', borderRadius: '1rem', fontSize: '0.75rem', background: lead.segment === 'VIP' ? '#dc2626' : lead.segment === 'Standard' ? '#ca8a04' : '#16a34a', color: '#fff' }}>{lead.segment}</span>
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<span style={{ padding: '0.25rem 0.75rem', borderRadius: '1rem', fontSize: '0.75rem', background: lead.dormancy_flag === 'dormant_2y' ? '#7c2d12' : '#064e3b', color: '#fff' }}>{lead.dormancy_flag}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
|
||||
<button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} style={{ padding: '0.75rem 1.5rem', borderRadius: '0.5rem', border: 'none', background: page === 1 ? '#334155' : '#4169e1', color: '#fff', cursor: page === 1 ? 'not-allowed' : 'pointer', opacity: page === 1 ? 0.5 : 1 }}>← Previous</button>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<form onSubmit={handleJump} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<span style={{ color: '#64748b' }}>Go to:</span>
|
||||
<input type="number" value={jumpPage} onChange={(e) => setJumpPage(e.target.value)} placeholder="#" min={1} max={pagination.totalPages} style={{ width: '60px', padding: '0.5rem', borderRadius: '0.25rem', border: '1px solid #334155', background: '#1e293b', color: '#fff', textAlign: 'center' }} />
|
||||
<button type="submit" style={{ padding: '0.5rem 1rem', borderRadius: '0.25rem', border: 'none', background: '#334155', color: '#fff', cursor: 'pointer' }}>Go</button>
|
||||
</form>
|
||||
<span style={{ padding: '0.5rem 1rem', background: '#1e293b', borderRadius: '0.5rem' }}><strong>{page}</strong> / {pagination.totalPages}</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
||||
{[1, Math.floor(pagination.totalPages/4), Math.floor(pagination.totalPages/2), Math.floor(pagination.totalPages*3/4), pagination.totalPages].filter((p, i, arr) => arr.indexOf(p) === i && p > 0 && p <= pagination.totalPages).map(p => (
|
||||
<button key={p} onClick={() => setPage(p)} style={{ padding: '0.5rem 0.75rem', borderRadius: '0.25rem', border: 'none', background: page === p ? '#4169e1' : '#1e293b', color: '#fff', cursor: 'pointer', fontSize: '0.85rem' }}>{p}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button onClick={() => setPage(p => Math.min(pagination.totalPages, p + 1))} disabled={page >= pagination.totalPages} style={{ padding: '0.75rem 1.5rem', borderRadius: '0.5rem', border: 'none', background: page >= pagination.totalPages ? '#334155' : '#4169e1', color: '#fff', cursor: page >= pagination.totalPages ? 'not-allowed' : 'pointer', opacity: page >= pagination.totalPages ? 0.5 : 1 }}>Next →</button>
|
||||
</div>
|
||||
|
||||
<p style={{ marginTop: '1rem', color: '#64748b', textAlign: 'center' }}>Showing {leads.length} of {pagination.total.toLocaleString()} records</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user