"use client"; import { useState, useMemo, Fragment, useEffect } from "react"; import { updateLeadFull } from "@/lib/admin-store"; import ConfirmForm from "@/components/admin/ConfirmForm"; import { Search, Filter, Calendar, MapPin, User, Phone, Mail, FileText, X, CheckCircle, RefreshCw, ChevronDown, ChevronUp, Sparkles } from "lucide-react"; const statuses = ["new", "contacted", "itinerary_shared", "payment_pending", "booked", "lost", "support_needed"] as const; interface Lead { id: number; name: string; email: string; phone: string; destination: string; travelMonth: string; travelers: number; budget: string; message: string; status: string; notes?: string; followUpAt?: string; source: string; createdAt: string; } interface LeadsCRMProps { initialLeads: Lead[]; } export default function LeadsCRM({ initialLeads }: LeadsCRMProps) { const [leads, setLeads] = useState(initialLeads); useEffect(() => { setLeads(initialLeads); }, [initialLeads]); const [searchTerm, setSearchTerm] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [destinationFilter, setDestinationFilter] = useState("all"); const [sourceFilter, setSourceFilter] = useState("all"); const [sortBy, setSortBy] = useState<"newest" | "oldest">("newest"); const [expandedLeads, setExpandedLeads] = useState>({}); const toggleExpand = (id: number) => { setExpandedLeads(prev => ({ ...prev, [id]: !prev[id] })); }; const expandAll = () => { const allExpanded = filteredAndSortedLeads.reduce((acc, l) => { acc[l.id] = true; return acc; }, {} as Record); setExpandedLeads(allExpanded); }; const collapseAll = () => { setExpandedLeads({}); }; // Get unique destinations and sources for filter dropdowns const uniqueDestinations = useMemo(() => { const dests = new Set(leads.map(l => l.destination).filter(Boolean)); return Array.from(dests).sort(); }, [leads]); const uniqueSources = useMemo(() => { const sources = new Set(leads.map(l => l.source).filter(Boolean)); return Array.from(sources).sort(); }, [leads]); // Handle lead update (retains local state sync) const handleLeadUpdate = async (id: number, status: string, notes: string, followUpAt: string) => { const res = await updateLeadFull(id, status, notes, followUpAt); if (res?.success) { setLeads(prev => prev.map(l => (l.id === id ? { ...l, status, notes, followUpAt, updatedAt: new Date().toISOString() } : l)) ); } }; // Filter and sort logic const filteredAndSortedLeads = useMemo(() => { let result = [...leads]; // Search term if (searchTerm.trim() !== "") { const q = searchTerm.toLowerCase(); result = result.filter( l => l.name?.toLowerCase().includes(q) || l.email?.toLowerCase().includes(q) || l.phone?.toLowerCase().includes(q) || l.destination?.toLowerCase().includes(q) || l.message?.toLowerCase().includes(q) || l.notes?.toLowerCase().includes(q) ); } // Status filter if (statusFilter !== "all") { result = result.filter(l => l.status === statusFilter); } // Destination filter if (destinationFilter !== "all") { result = result.filter(l => l.destination === destinationFilter); } // Source filter if (sourceFilter !== "all") { result = result.filter(l => l.source === sourceFilter); } // Sorting result.sort((a, b) => { const dateA = new Date(a.createdAt).getTime(); const dateB = new Date(b.createdAt).getTime(); return sortBy === "newest" ? dateB - dateA : dateA - dateB; }); return result; }, [leads, searchTerm, statusFilter, destinationFilter, sourceFilter, sortBy]); // Dynamic statistics based on filtered list const stats = useMemo(() => { const total = filteredAndSortedLeads.length; const booked = filteredAndSortedLeads.filter(l => l.status === "booked").length; const pending = filteredAndSortedLeads.filter(l => l.status === "payment_pending").length; const newLeads = filteredAndSortedLeads.filter(l => l.status === "new").length; const contacted = filteredAndSortedLeads.filter(l => l.status === "contacted" || l.status === "itinerary_shared").length; return { total, booked, pending, newLeads, contacted }; }, [filteredAndSortedLeads]); // Reset all filters const resetFilters = () => { setSearchTerm(""); setStatusFilter("all"); setDestinationFilter("all"); setSourceFilter("all"); setSortBy("newest"); }; const getStatusBadgeClass = (status: string) => { switch (status) { case "booked": return "bg-green-50 text-green-700 border-green-200"; case "new": return "bg-blue-50 text-blue-700 border-blue-200"; case "payment_pending": return "bg-amber-50 text-amber-700 border-amber-200"; case "contacted": case "itinerary_shared": return "bg-purple-50 text-purple-700 border-purple-200"; case "lost": return "bg-gray-100 text-gray-600 border-gray-200"; case "support_needed": return "bg-red-50 text-red-700 border-red-200"; default: return "bg-slate-50 text-slate-700 border-slate-200"; } }; return (
{/* Dynamic Summary Cards */}
Filtered Leads
{stats.total}
Booked (Paid)
{stats.booked}
Payments Pending
{stats.pending}
New Inquiries
{stats.newLeads}
Follow-ups Active
{stats.contacted}
{/* Filter and Search Bar */}
{/* Search Input */}
setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 rounded-full border border-[#F1D9D0] bg-[#FFF8F0]/30 text-sm outline-none focus:border-[#FF4A7D]/40 transition" /> {searchTerm && ( )}
{/* Quick Filters */}
{/* Status Select */}
Status:
{/* Destination Select */}
Dest:
{/* Source Select */}
Source:
{/* Sort Select */}
Sort:
{(searchTerm || statusFilter !== "all" || destinationFilter !== "all" || sourceFilter !== "all") && ( )}
{/* Table Toolbar (Expand/Collapse All + Stats info) */}
Showing {filteredAndSortedLeads.length} of {leads.length} leads
{/* Mobile leads card list (visible on mobile/tablet, hidden on desktop) */}
{filteredAndSortedLeads.map((l) => { const isExpanded = !!expandedLeads[l.id]; return (
{/* Header: Name & Status */}
{l.name}
{l.status.replace("_", " ")}
{/* Contact details & Trip details grid */}
Contact Info
Trip Details
{l.destination}
{l.travelMonth} • {l.travelers} pax • {l.budget}
{/* Source & Date info */}
Received: {new Date(l.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
Source: {l.source || "organic"}
{/* Action buttons */}
WhatsApp
{/* Expanded details container */} {isExpanded && (
{/* Traveler info & message */}

Traveler Inquiry details

{l.message ? (
Message

"{l.message}"

) : (

No custom message provided.

)}
{/* Interactive state form */}

Update Pipeline State

{ const status = formData.get("status") as string; const notes = formData.get("notes") as string; const follow = formData.get("followUpAt") as string; await handleLeadUpdate(l.id, status, notes, follow); }} confirmText={`Update pipeline details for "${l.name}"?`} buttonText="Save & Update Lead" buttonClassName="w-full rounded-full bg-[#13253D] hover:bg-[#FF4A7D] text-white py-2.5 text-xs font-bold transition-all shadow-sm" className="space-y-3" >