79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useUser } from '@auth0/nextjs-auth0/client';
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Lead } from '@/lib/types';
|
|
|
|
export default function AdminLeads() {
|
|
const { user, isLoading } = useUser();
|
|
const [leads, setLeads] = useState<Lead[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [pages, setPages] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
fetch(`/api/admin/leads?page=${page}`).then((r) => r.json()).then((data) => {
|
|
setLeads(data.leads);
|
|
setPages(data.pages);
|
|
setTotal(data.total);
|
|
});
|
|
}
|
|
}, [user, page]);
|
|
|
|
if (isLoading) return <div className="p-8 text-center">Loading...</div>;
|
|
if (!user) return <div className="p-8 text-center"><a href="/api/auth/login" className="bg-accent text-white px-6 py-2 rounded-lg">Sign In</a></div>;
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto px-4 py-8">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-2xl font-bold">Leads ({total})</h1>
|
|
<Link href="/admin" className="text-sm text-accent hover:underline">← Dashboard</Link>
|
|
</div>
|
|
|
|
<div className="border rounded-xl overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 border-b">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 font-medium">Email</th>
|
|
<th className="text-left px-4 py-3 font-medium">Organisation</th>
|
|
<th className="text-left px-4 py-3 font-medium">Tool</th>
|
|
<th className="text-left px-4 py-3 font-medium">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{leads.map((lead) => (
|
|
<tr key={lead.id} className="border-b last:border-0">
|
|
<td className="px-4 py-3">{lead.email}</td>
|
|
<td className="px-4 py-3">{lead.org_name || '—'}</td>
|
|
<td className="px-4 py-3 capitalize">{lead.tool.replace(/-/g, ' ')}</td>
|
|
<td className="px-4 py-3 text-gray-500">
|
|
{new Date(lead.created_at).toLocaleDateString()}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{leads.length === 0 && (
|
|
<tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">No leads yet</td></tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{pages > 1 && (
|
|
<div className="flex justify-center gap-2 mt-4">
|
|
{Array.from({ length: pages }, (_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setPage(i + 1)}
|
|
className={`px-3 py-1 rounded text-sm ${page === i + 1 ? 'bg-accent text-white' : 'bg-gray-100 hover:bg-gray-200'}`}
|
|
>
|
|
{i + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|