309 lines
17 KiB
TypeScript
309 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useRouter } from "next/navigation";
|
|
import { UserPlus, RefreshCw, ArrowRightCircle } from "lucide-react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Input } from "@/components/ui/Input";
|
|
import { Modal } from "@/components/ui/Modal";
|
|
import { formatDate } from "@/lib/utils";
|
|
import api from "@/lib/api";
|
|
import { toast } from "sonner";
|
|
import type { Lead } from "@/types";
|
|
|
|
const statusVariant: Record<string, "success" | "warning" | "danger" | "muted" | "default"> = {
|
|
NEW: "muted", CONTACTED: "default" as any, INTERESTED: "warning", CONVERTED: "success", LOST: "danger",
|
|
};
|
|
|
|
const statusOptions = ["NEW", "CONTACTED", "INTERESTED", "CONVERTED", "LOST"];
|
|
|
|
export default function LeadsPage() {
|
|
const qc = useQueryClient();
|
|
const router = useRouter();
|
|
const [search, setSearch] = useState("");
|
|
const [selected, setSelected] = useState<Lead | null>(null);
|
|
const [showAdd, setShowAdd] = useState(false);
|
|
const [showConvert, setShowConvert] = useState(false);
|
|
const [form, setForm] = useState({ firstName: "", lastName: "", phone: "", email: "", address: "", notes: "", source: "" });
|
|
const [statusUpdate, setStatusUpdate] = useState("");
|
|
const [convertForm, setConvertForm] = useState({ firstName: "", lastName: "", phone: "", email: "", address: "", areaId: "", planId: "", billingType: "POSTPAID" });
|
|
|
|
const { data = [], isLoading, refetch } = useQuery<Lead[]>({
|
|
queryKey: ["leads", search],
|
|
queryFn: async () => {
|
|
const params = new URLSearchParams({ limit: "100" });
|
|
if (search) params.set("search", search);
|
|
const res = await api.get<Lead[] | { data: Lead[] }>(`/api/v1/leads?${params}`);
|
|
const d = res.data;
|
|
return Array.isArray(d) ? d : d.data ?? [];
|
|
},
|
|
});
|
|
|
|
const addLead = useMutation({
|
|
mutationFn: async () => {
|
|
await api.post("/api/v1/leads", {
|
|
firstName: form.firstName, lastName: form.lastName,
|
|
phone: form.phone, email: form.email || undefined,
|
|
address: form.address || undefined, notes: form.notes || undefined,
|
|
source: form.source || undefined,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Lead added!");
|
|
setShowAdd(false);
|
|
setForm({ firstName: "", lastName: "", phone: "", email: "", address: "", notes: "", source: "" });
|
|
qc.invalidateQueries({ queryKey: ["leads"] });
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to add lead"),
|
|
});
|
|
|
|
const updateStatus = useMutation({
|
|
mutationFn: async ({ id, status }: { id: string; status: string }) => {
|
|
await api.patch(`/api/v1/leads/${id}`, { status });
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Status updated!");
|
|
qc.invalidateQueries({ queryKey: ["leads"] });
|
|
if (selected) setSelected(prev => prev ? { ...prev, status: statusUpdate as Lead["status"] } : prev);
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to update"),
|
|
});
|
|
|
|
const deleteLead = useMutation({
|
|
mutationFn: async (id: string) => { await api.delete(`/api/v1/leads/${id}`); },
|
|
onSuccess: () => {
|
|
toast.success("Lead deleted");
|
|
setSelected(null);
|
|
qc.invalidateQueries({ queryKey: ["leads"] });
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to delete"),
|
|
});
|
|
|
|
const convertToClient = useMutation({
|
|
mutationFn: async () => {
|
|
const res = await api.post("/api/v1/clients", {
|
|
firstName: convertForm.firstName, lastName: convertForm.lastName,
|
|
phone: convertForm.phone, email: convertForm.email || undefined,
|
|
address: convertForm.address || undefined,
|
|
areaId: convertForm.areaId || undefined,
|
|
planId: convertForm.planId || undefined,
|
|
});
|
|
// Mark lead as converted
|
|
if (selected) await api.patch(`/api/v1/leads/${selected.id}`, { status: "CONVERTED" });
|
|
return res.data;
|
|
},
|
|
onSuccess: (data: any) => {
|
|
toast.success("Lead converted to client!");
|
|
setShowConvert(false);
|
|
setSelected(null);
|
|
qc.invalidateQueries({ queryKey: ["leads"] });
|
|
if (data?.id) router.push(`/clients/${data.id}`);
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to convert lead"),
|
|
});
|
|
|
|
const { data: areas = [] } = useQuery<{ id: string; name: string }[]>({
|
|
queryKey: ["areas"],
|
|
queryFn: async () => { const r = await api.get("/api/v1/areas"); return Array.isArray(r.data) ? r.data : (r.data as any).data ?? []; },
|
|
});
|
|
|
|
const { data: activePlans = [] } = useQuery<{ id: string; name: string; monthlyPrice: number; type: string }[]>({
|
|
queryKey: ["plans", "active"],
|
|
queryFn: async () => { const r = await api.get("/api/v1/plans?isActive=true"); return Array.isArray(r.data) ? r.data : (r.data as any).data ?? []; },
|
|
});
|
|
|
|
const filteredConvertPlans = activePlans.filter(p => !convertForm.billingType || p.type === convertForm.billingType);
|
|
|
|
const counts = statusOptions.reduce((acc, s) => ({ ...acc, [s]: data.filter(l => l.status === s).length }), {} as Record<string, number>);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Leads</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Prospective customers pipeline</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button onClick={() => refetch()} variant="outline" size="sm"><RefreshCw size={14} className="mr-1" />Refresh</Button>
|
|
<Button onClick={() => setShowAdd(true)} size="sm"><UserPlus size={14} className="mr-1" />Add Lead</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pipeline summary */}
|
|
<div className="flex gap-3 flex-wrap">
|
|
{statusOptions.map(status => (
|
|
<div key={status} className="bg-white border rounded-xl px-4 py-3 text-center min-w-[90px] shadow-sm">
|
|
<p className="text-2xl font-bold text-gray-800">{counts[status] ?? 0}</p>
|
|
<Badge variant={statusVariant[status] ?? "muted"} className="mt-1">{status}</Badge>
|
|
</div>
|
|
))}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-center min-w-[90px]">
|
|
<p className="text-2xl font-bold text-blue-700">{data.length}</p>
|
|
<p className="text-xs text-blue-600 font-medium mt-1">TOTAL</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<CardTitle>All Leads ({data.length})</CardTitle>
|
|
<input className="border rounded-lg px-3 py-2 text-sm max-w-xs w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Search by name or phone..."
|
|
value={search} onChange={e => setSearch(e.target.value)} />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow><Th>Name</Th><Th>Phone</Th><Th>Email</Th><Th>Address</Th><Th>Status</Th><Th>Source</Th><Th>Added</Th></TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{isLoading ? (
|
|
Array.from({ length: 6 }).map((_, i) => (
|
|
<TableRow key={i}><Td colSpan={7}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td></TableRow>
|
|
))
|
|
) : data.length === 0 ? (
|
|
<EmptyState colSpan={7} message="No leads yet" icon={<UserPlus size={24} />} />
|
|
) : data.map(lead => (
|
|
<TableRow key={lead.id} onClick={() => { setSelected(lead); setStatusUpdate(lead.status); }}
|
|
className="cursor-pointer hover:bg-blue-50 transition-colors">
|
|
<Td className="font-medium">{lead.firstName} {lead.lastName}</Td>
|
|
<Td>{lead.phone}</Td>
|
|
<Td className="text-gray-500">{lead.email ?? "—"}</Td>
|
|
<Td className="text-gray-500 max-w-[150px] truncate">{lead.address ?? "—"}</Td>
|
|
<Td><Badge variant={statusVariant[lead.status] ?? "muted"}>{lead.status}</Badge></Td>
|
|
<Td className="text-gray-400 text-sm">{lead.source ?? "—"}</Td>
|
|
<Td className="text-gray-400 text-xs">{formatDate(lead.createdAt)}</Td>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Lead Detail Modal */}
|
|
<Modal isOpen={!!selected} onClose={() => setSelected(null)} title={`${selected?.firstName ?? ""} ${selected?.lastName ?? ""}`}>
|
|
{selected && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
|
|
<div className="flex justify-between"><span className="text-gray-500">Phone</span><span className="font-medium">{selected.phone}</span></div>
|
|
{selected.email && <div className="flex justify-between"><span className="text-gray-500">Email</span><span>{selected.email}</span></div>}
|
|
{selected.address && <div className="flex justify-between"><span className="text-gray-500">Address</span><span className="text-right max-w-[200px]">{selected.address}</span></div>}
|
|
{selected.source && <div className="flex justify-between"><span className="text-gray-500">Source</span><span>{selected.source}</span></div>}
|
|
{selected.notes && <div className="flex justify-between items-start"><span className="text-gray-500">Notes</span><span className="text-right max-w-[200px]">{selected.notes}</span></div>}
|
|
<div className="flex justify-between"><span className="text-gray-500">Added</span><span>{formatDate(selected.createdAt)}</span></div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Update Status</label>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{statusOptions.map(s => (
|
|
<button key={s} onClick={() => setStatusUpdate(s)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border ${statusUpdate === s ? "border-blue-600 bg-blue-600 text-white" : "border-gray-200 text-gray-600 hover:border-blue-400"}`}>
|
|
{s}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{statusUpdate !== selected.status && (
|
|
<Button size="sm" className="mt-1" onClick={() => updateStatus.mutate({ id: selected.id, status: statusUpdate })} isLoading={updateStatus.isPending}>
|
|
Update to {statusUpdate}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-between pt-1 flex-wrap gap-2">
|
|
<div className="flex gap-2">
|
|
<Button variant="danger" size="sm" onClick={() => { if (confirm("Delete this lead?")) deleteLead.mutate(selected.id); }} isLoading={deleteLead.isPending}>Delete</Button>
|
|
{selected.status !== "CONVERTED" && (
|
|
<Button size="sm" variant="outline" onClick={() => {
|
|
setConvertForm({
|
|
firstName: selected.firstName, lastName: selected.lastName,
|
|
phone: selected.phone, email: selected.email ?? "",
|
|
address: selected.address ?? "", areaId: "", planId: "", billingType: "POSTPAID",
|
|
});
|
|
setShowConvert(true);
|
|
}}>
|
|
<ArrowRightCircle size={14} className="mr-1" /> Convert to Client
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={() => setSelected(null)}>Close</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
|
|
{/* Convert to Client Modal */}
|
|
<Modal isOpen={showConvert} onClose={() => setShowConvert(false)} title="Convert Lead to Client" className="max-w-xl">
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-500">Pre-filled from lead data. Complete missing info to create the client.</p>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input label="First Name *" value={convertForm.firstName} onChange={e => setConvertForm(f => ({ ...f, firstName: e.target.value }))} />
|
|
<Input label="Last Name *" value={convertForm.lastName} onChange={e => setConvertForm(f => ({ ...f, lastName: e.target.value }))} />
|
|
</div>
|
|
<Input label="Phone *" value={convertForm.phone} onChange={e => setConvertForm(f => ({ ...f, phone: e.target.value }))} />
|
|
<Input label="Email" type="email" value={convertForm.email} onChange={e => setConvertForm(f => ({ ...f, email: e.target.value }))} />
|
|
<Input label="Address" value={convertForm.address} onChange={e => setConvertForm(f => ({ ...f, address: e.target.value }))} />
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Area</label>
|
|
<select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.areaId} onChange={e => setConvertForm(f => ({ ...f, areaId: e.target.value }))}>
|
|
<option value="">— Select area —</option>
|
|
{areas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Billing Type</label>
|
|
<select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.billingType} onChange={e => setConvertForm(f => ({ ...f, billingType: e.target.value, planId: "" }))}>
|
|
<option value="POSTPAID">Postpaid</option>
|
|
<option value="PREPAID">Prepaid</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Plan *</label>
|
|
<select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.planId} onChange={e => setConvertForm(f => ({ ...f, planId: e.target.value }))}>
|
|
<option value="">— Select plan —</option>
|
|
{filteredConvertPlans.map(p => <option key={p.id} value={p.id}>{p.name} — ₱{Number(p.monthlyPrice).toLocaleString()}/mo</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setShowConvert(false)}>Cancel</Button>
|
|
<Button onClick={() => convertToClient.mutate()} isLoading={convertToClient.isPending}
|
|
disabled={!convertForm.firstName || !convertForm.lastName || !convertForm.phone || !convertForm.planId}>
|
|
<ArrowRightCircle size={14} className="mr-1" /> Create Client
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Add Lead Modal */}
|
|
<Modal isOpen={showAdd} onClose={() => setShowAdd(false)} title="Add New Lead">
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input label="First Name *" value={form.firstName} onChange={e => setForm(f => ({ ...f, firstName: e.target.value }))} />
|
|
<Input label="Last Name *" value={form.lastName} onChange={e => setForm(f => ({ ...f, lastName: e.target.value }))} />
|
|
</div>
|
|
<Input label="Phone *" value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} />
|
|
<Input label="Email" type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} />
|
|
<Input label="Address" value={form.address} onChange={e => setForm(f => ({ ...f, address: e.target.value }))} />
|
|
<Input label="Source (e.g. Facebook, Referral)" value={form.source} onChange={e => setForm(f => ({ ...f, source: e.target.value }))} />
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Notes</label>
|
|
<textarea className="border rounded-lg px-3 py-2 text-sm resize-none h-16 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} />
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setShowAdd(false)}>Cancel</Button>
|
|
<Button onClick={() => addLead.mutate()} isLoading={addLead.isPending} disabled={!form.firstName || !form.lastName || !form.phone}>Add Lead</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|