"use client"; import { useState, useMemo, useEffect, useRef, Suspense } from "react"; import { useReceivedLeads } from "@/hooks/useReceivedLeads"; import { useSentLeads } from "@/hooks/useSentLeads"; import { useAuth } from "@/hooks/use-auth"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Search, Loader2 } from "lucide-react"; import Image from "next/image"; // ─── Types ──────────────────────────────────────────────────────────────────── interface SentRow { enquiryId: string; notes: string; } interface ReceivedRow { timestamp: string; dateTime: string; id: string; clientName: string; mobile: string | number; email: string; subject: string; notes: string; ivrUrl: string; website: string; assignto: string; dataSource: { label: string; color: PillColor }; transcription: string; viewUrl: string; callSubId: string; initialid: string; callstarttime: string; callendtime: string; callduration: string; callstatus: string; calltype: string; callendreason: string; aicallcategory: string; finalcallstatus: string; customerengagementlevel: string; interestlevel: string; calloutcome: string; nextactionrequired: string; aicallsummary: string; leadstatus: string; cutomercontext: string; preferreddatetime: string; cutomerintent: string; additionalnotes: string; servicecategory: string; finalleadoutcome: string; scheduledtime: string; scheduledstatus: string; _ts_num?: number; _dt_num?: number; finalStatus: { label: string; dot: DotColor; color: PillColor }; company: string; } type PillColor = "green" | "blue" | "purple" | "orange" | "red" | "yellow" | "gray" | "teal" | "indigo" | "pink"; type DotColor = "g" | "o" | "r" | "b" | "x"; // ─── Mock / Fallback Data ───────────────────────────────────────────────────── const RECEIVED_DATA: ReceivedRow[] = [ { timestamp: "20/03/2026", dateTime: "16/03/2026 07:11", id: "Test_Ticket_001-T4b3935632", clientName: "Satyam", mobile: "+91 73006 16307", email: "satyam@kairali.com", subject: "Enquiry From Chat", notes: "KServe AI callback received.", ivrUrl: "unpod.ai/aK…", website: "KServe API", assignto: "", dataSource: { label: "Outcomes", color: "indigo" }, transcription: "[ASSISTANT] Hello, this is KServe AI.", viewUrl: "View", callSubId: "—", initialid: "", callstarttime: "", callendtime: "", callduration: "0", callstatus: "", calltype: "", callendreason: "", aicallcategory: "", finalcallstatus: "", customerengagementlevel: "", interestlevel: "", calloutcome: "", nextactionrequired: "", aicallsummary: "", leadstatus: "", cutomercontext: "", preferreddatetime: "", cutomerintent: "", additionalnotes: "", servicecategory: "", finalleadoutcome: "", scheduledtime: "", scheduledstatus: "", finalStatus: { label: "Received", dot: "g", color: "green" }, company: "Kairali" }, { timestamp: "20/03/2026", dateTime: "17/03/2026 09:45", id: "Ticket_002-T5c4820543", clientName: "Priya Sharma", mobile: "+91 98765 43210", email: "priya@example.com", subject: "IVR Call Response", notes: "IVR callback completed.", ivrUrl: "unpod.ai/bM…", website: "KServe API", assignto: "", dataSource: { label: "IVR Callback", color: "blue" }, transcription: "[USER] Hi, I got a call from Kairali.", viewUrl: "View", callSubId: "SUB-4920", initialid: "", callstarttime: "", callendtime: "", callduration: "0", callstatus: "", calltype: "", callendreason: "", aicallcategory: "", finalcallstatus: "", customerengagementlevel: "", interestlevel: "", calloutcome: "", nextactionrequired: "", aicallsummary: "", leadstatus: "", cutomercontext: "", preferreddatetime: "", cutomerintent: "", additionalnotes: "", servicecategory: "", finalleadoutcome: "", scheduledtime: "", scheduledstatus: "", finalStatus: { label: "Received", dot: "g", color: "green" }, company: "Kairali" }, ]; // ─── Table Primitives ───────────────────────────────────────────────────────── const PILL_STYLES: Record = { green: { background: "#d1fae5", color: "#065f46" }, blue: { background: "#dbeafe", color: "#1e40af" }, purple: { background: "#ede9fe", color: "#5b21b6" }, orange: { background: "#ffedd5", color: "#9a3412" }, red: { background: "#fee2e2", color: "#991b1b" }, yellow: { background: "#fef3c7", color: "#92400e" }, gray: { background: "#f1f5f9", color: "#475569" }, teal: { background: "#ccfbf1", color: "#0f766e" }, indigo: { background: "#e0e7ff", color: "#3730a3" }, pink: { background: "#fce7f3", color: "#9d174d" }, }; const DOT: { [k in DotColor]: string } = { g: "#10b981", o: "#f59e0b", r: "#ef4444", b: "#3b82f6", x: "#94a3b8" }; function Pill({ label, color, dot }: { label: string; color: PillColor; dot?: DotColor }) { return {dot && }{label}; } function IdCell({ children, error }: { children: React.ReactNode; error?: boolean }) { return {children}; } function Td({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) { return {children}; } function Th({ children }: { children: React.ReactNode }) { return {children}; } function SortableTh({ children, colKey, sortKey, sortDir, onSort }: { children: React.ReactNode; colKey: string; sortKey: string; sortDir: "asc" | "desc"; onSort: (k: string) => void; }) { const active = sortKey === colKey; return ( onSort(colKey)} style={{ padding: "9px 11px", fontSize: 10, fontWeight: 700, color: active ? "#fff" : "rgba(255,255,255,.78)", textTransform: "uppercase" as const, letterSpacing: ".6px", whiteSpace: "nowrap", textAlign: "left" as const, borderRight: "1px solid rgba(255,255,255,.06)", cursor: "pointer", userSelect: "none", background: active ? "rgba(255,255,255,.12)" : undefined }}> {children} ▲ ▼ ); } function TooltipTd({ children, label, maxWidth = 140, mono = false }: { children: string; label: string; maxWidth?: number; mono?: boolean }) { const [show, setShow] = useState(false); const [pos, setPos] = useState({ x: 0, y: 0 }); const isEmpty = !children || children === "—"; return ( { const r = e.currentTarget.getBoundingClientRect(); setPos({ x: r.left, y: r.bottom + 8 }); setShow(true); }} onMouseLeave={() => setShow(false)} style={{ padding: "8px 11px", fontSize: 11.5, color: "#374151", borderRight: "1px solid #f1f5f9", maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", verticalAlign: "middle", fontFamily: mono ? "monospace" : undefined }}> {children} {show && !isEmpty && (
{label} {children}
)} ); } function NotesTd({ children }: { children: string }) { const [show, setShow] = useState(false); const [pos, setPos] = useState({ x: 0, y: 0 }); const isEmpty = !children || children === "—"; return ( { const r = e.currentTarget.getBoundingClientRect(); setPos({ x: r.left, y: r.bottom + 8 }); setShow(true); }} onMouseLeave={() => setShow(false)} style={{ padding: "8px 11px", fontSize: 11.5, color: "#94a3b8", borderRight: "1px solid #f1f5f9", maxWidth: 140, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", verticalAlign: "middle" }}> {children} {show && !isEmpty && (
Notes {children}
)} ); } function CopyTd({ value }: { value: string }) { const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(value).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); }); }; return ( {copied ? "✓ Copied!" : value} ); } const NOT_CONNECTED_COLOR = "#64748b"; const CONNECTED_COLOR = "#059669"; function colorText(value: string, type: "status" | "finalcallstatus" | "interest" | "outcome" | "intent" | "finalleadoutcome" | "leadstatus"): string { const v = (value || "").toLowerCase().trim(); const colors: Record> = { status: { completed: CONNECTED_COLOR, failed: "#dc2626", "not connected": NOT_CONNECTED_COLOR }, finalcallstatus: { interested: CONNECTED_COLOR, drop: "#dc2626", "call back": "#2563eb", callback: "#2563eb", "not connected": NOT_CONNECTED_COLOR }, interest: { interested: CONNECTED_COLOR, "non interested": "#dc2626", "not interested": "#dc2626", maybe: "#d97706" }, outcome: { "follow-up needed": "#ea580c", "follow up needed": "#ea580c", "callback requested": "#2563eb", "callback scheduled": "#2563eb" }, intent: { high: CONNECTED_COLOR, medium: "#d97706", low: "#ea580c", unqualified: "#dc2626" }, leadstatus: { qualified: CONNECTED_COLOR, "non qualified": "#dc2626", "non-qualified": "#dc2626", "not qualified": "#dc2626", unqualified: "#dc2626", "not connected": NOT_CONNECTED_COLOR, open: "#2563eb", pending: "#ea580c" }, finalleadoutcome: { "did not enquire": "#dc2626", "did not enquiry": "#dc2626", "junk": "#dc2626", "not interested": "#dc2626", "not interested ahv": "#dc2626", "not reachable": "#dc2626", "not rechable": "#dc2626", "cold": "#dc2626", "duplicate lead": "#dc2626", "dnc client": "#dc2626", "don't call furthur": "#dc2626", "outreach stopped": "#dc2626", "not connected": NOT_CONNECTED_COLOR, "no answer": NOT_CONNECTED_COLOR, "busy": NOT_CONNECTED_COLOR, "technical error": NOT_CONNECTED_COLOR, "language issue": NOT_CONNECTED_COLOR, "other cases": "#94a3b8", "other/misc enquiry": "#94a3b8", "product distributor": CONNECTED_COLOR, "product stockists": CONNECTED_COLOR, "individual products buying": CONNECTED_COLOR, "individual resort booking": CONNECTED_COLOR, "group resort booking": CONNECTED_COLOR, "treatment package for resort": CONNECTED_COLOR, "single therapy for individual": CONNECTED_COLOR, "treatment package for kairali centres": CONNECTED_COLOR, "franchise": CONNECTED_COLOR, "sanitizers enquiry": CONNECTED_COLOR, "ayurveda training": CONNECTED_COLOR, "yoga training": CONNECTED_COLOR, "ayurveda and yoga training": CONNECTED_COLOR, "prevention_rejuvenation": CONNECTED_COLOR, "ayurvedic doctor_panchakarma center": CONNECTED_COLOR, "group resort booking_yoga retreat": CONNECTED_COLOR, "pharmacy_retail": CONNECTED_COLOR, "online sales": CONNECTED_COLOR, "export_import": CONNECTED_COLOR, "treatment package for resort ahv": CONNECTED_COLOR, "prevention_rejuvenation ahv": CONNECTED_COLOR, "group resort booking ahv yoga retreat": CONNECTED_COLOR, "ayurvedic training ahv": CONNECTED_COLOR, "yoga training ahv": CONNECTED_COLOR, "panchkarma training": CONNECTED_COLOR, "contract manufacturing": CONNECTED_COLOR, "order status enquiry": "#2563eb", "already spoken": "#2563eb", "reverify": "#2563eb", "expert required": "#2563eb", "assign to mr": "#2563eb", "travel agent": "#2563eb", "wants details over email": "#2563eb", "jobs enquiry": "#ea580c", "doctor consultation required": "#ea580c", "ayurvedic doctor_panchakarma centre": "#7c3aed", }, }; const map = colors[type] || {}; if (map[v]) return map[v]; for (const [key, color] of Object.entries(map)) { if (v.includes(key) || key.includes(v)) return color; } return "#374151"; } function ColorTd({ value, type, maxWidth }: { value: string; type: "status" | "finalcallstatus" | "interest" | "outcome" | "intent" | "finalleadoutcome" | "leadstatus"; maxWidth?: number }) { if (!value || value === "—") return {value || "—"}; return ( {value} ); } // ─── Pagination ─────────────────────────────────────────────────────────────── function Pagination({ total, page, perPage, onPage, onPerPage }: { total: number; page: number; perPage: number; onPage: (p: number) => void; onPerPage: (n: number) => void }) { const totalPages = Math.max(1, Math.ceil(total / perPage)); const from = total === 0 ? 0 : Math.min((page - 1) * perPage + 1, total); const to = Math.min(page * perPage, total); const [goInput, setGoInput] = useState(""); const handleGo = () => { const n = parseInt(goInput); if (!isNaN(n) && n >= 1 && n <= totalPages) { onPage(n); setGoInput(""); } }; const getPages = (): (number | "…")[] => { if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1); const pages: (number | "…")[] = [1]; if (page > 3) pages.push("…"); for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i); if (page < totalPages - 2) pages.push("…"); pages.push(totalPages); return pages; }; const btn = (label: React.ReactNode, onClick: () => void, disabled: boolean, active = false, key?: string): React.ReactNode => ( ); return (
Showing {from}–{to} of {total} leads
{btn("«", () => onPage(1), page === 1, false, "first")} {btn("‹ Prev", () => onPage(page - 1), page === 1, false, "prev")} {getPages().map((p, i) => p === "…" ? … : btn(p, () => onPage(p as number), false, p === page, `page-${p}`))} {btn("Next ›", () => onPage(page + 1), page === totalPages, false, "next")} {btn("»", () => onPage(totalPages), page === totalPages, false, "last")}
Rows/page
Go to setGoInput(e.target.value)} onKeyDown={e => e.key === "Enter" && handleGo()} placeholder="Page" style={{ height: 30, width: 56, padding: "0 8px", border: "1px solid #e2e8f0", borderRadius: 6, fontSize: 12.5, fontFamily: "inherit", background: "#fff", color: "#374151", textAlign: "center", outline: "none" }} />
); } // ─── Icons ──────────────────────────────────────────────────────────────────── const RecvSvg = ({ sz = 13 }: { sz?: number }) => ; const MicSvg = () => ; const PhoneSvg = () => ; // ─── Status Config & Helpers ────────────────────────────────────────────────── type StatusKey = "total_received" | "completed" | "not_connected" | "failed" | "busy" | "in_progress" | "scheduled" | "pending"; const STATUS_CFG: { key: StatusKey; label: string; color: string; bgColor: string; borderColor: string; matchFn: (s: string) => boolean }[] = [ { key: "total_received", label: "Total Received", color: "#6366f1", bgColor: "#eef2ff", borderColor: "#c7d2fe", matchFn: () => false }, { key: "completed", label: "Completed", color: "#059669", bgColor: "#f0fdf4", borderColor: "#bbf7d0", matchFn: s => /complet|success|received|done/i.test(s) }, { key: "not_connected", label: "Not Connected", color: "#64748b", bgColor: "#f8fafc", borderColor: "#e2e8f0", matchFn: s => /not.?connect|no.?answer|unanswered|unreachable/i.test(s) }, { key: "failed", label: "Failed", color: "#dc2626", bgColor: "#fff5f5", borderColor: "#fecaca", matchFn: s => /fail|error|reject|invalid/i.test(s) }, { key: "busy", label: "Busy", color: "#ea580c", bgColor: "#fff7ed", borderColor: "#ffedd5", matchFn: s => /busy/i.test(s) }, { key: "in_progress", label: "In Progress", color: "#2563eb", bgColor: "#eff6ff", borderColor: "#bfdbfe", matchFn: s => /in.?progress|inprogress|processing|queued/i.test(s) }, { key: "scheduled", label: "Scheduled", color: "#d97706", bgColor: "#fffbeb", borderColor: "#fde68a", matchFn: s => /schedul/i.test(s) }, ]; const StatusIcons: Record = { total_received: 📊, scheduled: 🕒, pending: ⏳, in_progress: 🔄, completed: ✅, not_connected: 📵, failed: ❌, busy: 📞, }; function getRowStatus(r: ReceivedRow): StatusKey { const cs = (r.callstatus || "").toLowerCase(); const hasScheduledTime = r.scheduledtime && r.scheduledtime !== "" && r.scheduledtime !== "—"; const finalOutcome = (r.finalleadoutcome || "").toLowerCase(); const scheduleOutcomeList = ["not connected", "busy", "not reachable", "no answer", "reverify", "—", ""]; if (hasScheduledTime && scheduleOutcomeList.includes(finalOutcome)) return "scheduled"; if (finalOutcome === "busy") return "busy"; if (cs.includes("notconnected") || cs.includes("no answer") || cs.includes("unanswered") || cs.includes("unreachable")) return "not_connected"; if (cs.includes("fail") || cs.includes("error") || cs.includes("rejected") || cs.includes("invalid")) return "failed"; if (cs.includes("in progress") || cs.includes("inprogress") || cs.includes("processing") || cs.includes("queued")) return "in_progress"; return "completed"; } function buildReceivedCounts(rows: ReceivedRow[], pendingCount: number) { const counts: Record = { total_received: 0, completed: 0, not_connected: 0, failed: 0, busy: 0, in_progress: 0, scheduled: 0, pending: 0 }; rows.forEach(r => { const s = getRowStatus(r); counts[s]++; }); counts.total_received = counts.completed + counts.not_connected + counts.failed; counts.pending = Math.max(0, pendingCount); return counts; } // ─── View Modal Constants ───────────────────────────────────────────────────── const CALL_INFO_KEYS = ["callSubId", "initialid", "calltype", "callstatus", "callduration", "callendreason", "callstarttime", "callendtime"]; const LEAD_INFO_KEYS = ["clientName", "mobile", "email", "company", "website", "subject", "assignto"]; const SENTIMENT_KEYS = ["customerengagementlevel", "interestlevel", "calloutcome", "leadstatus", "cutomerintent", "servicecategory", "finalleadoutcome", "finalcallstatus"]; const TIMING_KEYS = ["preferreddatetime", "scheduledtime", "scheduledstatus", "timestamp", "dateTime"]; const DETAILED_KEYS = ["aicallsummary", "cutomercontext", "notes", "additionalnotes", "aicallcategory", "nextactionrequired", "transcription"]; const KEYS_TO_HIDE = ["finalStatus", "dataSource", "viewUrl", "ivrUrl"]; const KEY_LABELS: Record = { id: "ID", initialid: "Initial ID", callSubId: "Call Sub ID", callstarttime: "Call Start", callendtime: "Call End", callduration: "Duration", callstatus: "Call Status", calltype: "Call Type", callendreason: "End Reason", aicallcategory: "AI Call Category", finalcallstatus: "Final Call Status", customerengagementlevel: "Engagement", interestlevel: "Interest Level", calloutcome: "Call Outcome", nextactionrequired: "Next Action", aicallsummary: "AI Call Summary", leadstatus: "Lead Status", cutomercontext: "Customer Context", preferreddatetime: "Preferred D/T", cutomerintent: "Customer Intent", additionalnotes: "Add. Notes", servicecategory: "Service Category", finalleadoutcome: "Final Lead Outcome", scheduledtime: "Scheduled Time", scheduledstatus: "Sched. Status", company: "Company", website: "Website", clientName: "Client Name", mobile: "Mobile", email: "Email", subject: "Subject", notes: "Notes", timestamp: "Gen. Timestamp", dateTime: "Enquiry D/T", transcription: "Call Transcription", }; // ─── View Modal ─────────────────────────────────────────────────────────────── function ViewModal({ row, onClose, onCallHistory }: { row: ReceivedRow; onClose: () => void; onCallHistory: () => void }) { const toTitleCase = (str: string) => KEY_LABELS[str] || str.replace(/([A-Z])/g, " $1").replace(/^./, s => s.toUpperCase()).trim(); const val = (v: any) => { if (v === null || v === undefined) return "—"; const t = String(v).trim(); return (t === "" || t === "0" || t === "—") ? "—" : t; }; const Field = ({ label, value, color = "#4f46e5" }: { label: string; value: any; color?: string }) => (
{label}
{val(value)}
); const Section = ({ title, icon, color, children, style }: { title: string; icon: string; color: string; children: React.ReactNode; style?: React.CSSProperties }) => (
{icon} {title}
{children}
); const filterFields = (keys: string[]) => keys.map(k => ({ key: k, label: toTitleCase(k), value: row[k as keyof ReceivedRow] })); const allDefined = [...CALL_INFO_KEYS, ...LEAD_INFO_KEYS, ...SENTIMENT_KEYS, ...TIMING_KEYS, ...DETAILED_KEYS, ...KEYS_TO_HIDE]; const generalFields = Object.entries(row).filter(([k, v]) => !allDefined.includes(k) && typeof v !== "object").map(([k, v]) => ({ key: k, label: toTitleCase(k), value: v })); return (
{ if (e.target === e.currentTarget) onClose(); }}>
{/* Header */}
Complete Call Analysis
{row.clientName} • {row.mobile} {row.initialid && <>•ID: {row.initialid}}
{/* Content */}
{filterFields(CALL_INFO_KEYS).map(f => )}
{filterFields(LEAD_INFO_KEYS).map(f => )}
{filterFields(SENTIMENT_KEYS).map(f => )}
{filterFields(TIMING_KEYS).map(f => )}
{generalFields.length > 0 && (
{generalFields.map(f => )}
)} {(row.ivrUrl || row.viewUrl) && (
{row.ivrUrl && row.ivrUrl !== "—" && ( )} {row.viewUrl && row.viewUrl !== "—" && ( )}
)}
AI Call Summary
{val(row.aicallsummary)}
Customer Context
{val(row.cutomercontext)}
Notes & Observations
{val(row.notes)}
{[{ lbl: "Additional Notes", v: row.additionalnotes }, { lbl: "AI Call Category", v: row.aicallcategory }, { lbl: "Next Action Required", v: row.nextactionrequired }].map(({ lbl, v }) => (
{lbl}
{val(v)}
))}
🎙️ Call Transcription
{val(row.transcription)}
{/* Footer */}
); } // ─── Call History Modal Helpers ─────────────────────────────────────────────── function parseDateTime(dt: string): number { if (!dt || dt === "—") return 0; const a = dt.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?/); if (a) { const first = parseInt(a[1]), second = parseInt(a[2]); const [day, mon] = first > 12 ? [first, second] : [second, first]; return new Date(`${a[3]}-${String(mon).padStart(2, "0")}-${String(day).padStart(2, "0")}T${a[4].padStart(2, "0")}:${a[5]}:${a[6] || "00"}`).getTime(); } return new Date(dt).getTime() || 0; } function getRowSortTime(row: ReceivedRow): number { return Math.max(row._ts_num || 0, row._dt_num || 0); } function formatCallDateTime(dt: string) { if (!dt || dt === "—") return —; const parts = dt.split(" "); if (parts.length < 2) return {dt}; return (
{parts[0]} {parts[1]}
); } // ─── Signed Audio Player ────────────────────────────────────────────────────── function SignedAudioPlayer({ url, dateTime, duration }: { url: string; dateTime: string; duration?: string | number }) { const [blobUrl, setBlobUrl] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const blobRef = useRef(null); useEffect(() => { if (!url || url === "—") return; setLoading(true); setError(null); fetch(`/api/audio-proxy?url=${encodeURIComponent(url)}`) .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.blob(); }) .then(blob => { const objectUrl = URL.createObjectURL(blob); blobRef.current = objectUrl; setBlobUrl(objectUrl); setLoading(false); }) .catch(err => { console.error("Audio fetch failed:", err); setError("Could not load recording. The link may have expired."); setLoading(false); }); return () => { if (blobRef.current) { URL.revokeObjectURL(blobRef.current); blobRef.current = null; } }; }, [url]); return (
Call Recording
{dateTime}{duration ? ` · ${duration}s` : ""}
{loading &&
Loading recording...
} {error &&
⚠️ {error}Open directly ↗
} {blobUrl &&
); } // ─── Call History Modal ─────────────────────────────────────────────────────── function CallHistoryModal({ selectedRow, allData, sentData, onClose }: { selectedRow: ReceivedRow; allData: ReceivedRow[]; sentData: SentRow[]; onClose: () => void }) { const calls = useMemo(() => { if (!selectedRow) return []; const searchId = (selectedRow.initialid && selectedRow.initialid !== "—") ? selectedRow.initialid : selectedRow.id; return allData .filter(r => { const rowInitialId = (r.initialid && r.initialid !== "—") ? r.initialid : null; return r.id === searchId || (rowInitialId && rowInitialId === searchId); }) .sort((a, b) => getRowSortTime(b) - getRowSortTime(a)); }, [selectedRow, allData]); const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { if (calls.length > 0) setActiveIndex(0); }, [calls]); const activeCall = calls[activeIndex] || null; const [showNotes, setShowNotes] = useState(false); const [notes, setNotes] = useState(""); const sentNote = useMemo(() => { if (!selectedRow) return ""; return sentData.find(s => s.enquiryId === selectedRow.initialid || s.enquiryId === selectedRow.id)?.notes || "No notes available"; }, [selectedRow, sentData]); const getStatusStyle = (s: string): { bg: string; fg: string; dot: string } => { const v = (s || "").toLowerCase(); if (/qualified/.test(v) && !/un|not|non/.test(v)) return { bg: "#d1fae5", fg: "#065f46", dot: "#10b981" }; if (/unqualified|non.?qualified|not.?qualified/.test(v)) return { bg: "#fee2e2", fg: "#991b1b", dot: "#ef4444" }; if (/pending/.test(v)) return { bg: "#fff7ed", fg: "#ea580c", dot: "#f59e0b" }; if (/complet|success|done/.test(v)) return { bg: "#d1fae5", fg: "#065f46", dot: "#10b981" }; if (/call.?back|callback/.test(v)) return { bg: "#dbeafe", fg: "#1e40af", dot: "#3b82f6" }; if (/not.?connect|no.?answer|unreach|busy/.test(v)) return { bg: "#f1f5f9", fg: "#475569", dot: "#94a3b8" }; if (/drop|fail|error/.test(v)) return { bg: "#fee2e2", fg: "#991b1b", dot: "#ef4444" }; if (/send.?detail|details/.test(v)) return { bg: "#fef3c7", fg: "#92400e", dot: "#f59e0b" }; if (/interest/.test(v)) return { bg: "#f0fdf4", fg: "#166534", dot: "#22c55e" }; if (/schedul/.test(v)) return { bg: "#ede9fe", fg: "#5b21b6", dot: "#7c3aed" }; return { bg: "#f1f5f9", fg: "#64748b", dot: "#94a3b8" }; }; const initials = (name: string) => (name || "").split(" ").slice(0, 2).map(w => w[0]).join("").toUpperCase() || "–"; const calcVariance = (): string => { if (calls.length < 2) return "—"; const oldest = getRowSortTime(calls[calls.length - 1]); const latest = getRowSortTime(calls[0]); const diffSec = Math.abs((latest - oldest) / 1000); const h = Math.floor(diffSec / 3600), m = Math.floor((diffSec % 3600) / 60), s = Math.floor(diffSec % 60); return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`; }; const getFullTime = (c: ReceivedRow) => { if (!c) return "—"; let dt = c.dateTime || ""; if (!dt.includes(":") && c.callstarttime && c.callstarttime.includes(":")) { if (c.callstarttime.length > 10) return c.callstarttime; return dt + " " + c.callstarttime; } return dt; }; const ac = activeCall; const acFullTime = ac ? getFullTime(ac) : "—"; const acStatus = ac ? (ac.finalleadoutcome || ac.callstatus || ac.finalStatus?.label || "") : ""; const acSt = getStatusStyle(acStatus); const chipStyle: React.CSSProperties = { background: "#fff", borderRadius: 10, padding: "10px 14px", border: "1.5px solid #9ca6b4", boxShadow: "0 1px 3px rgba(0,0,0,0.02), 0 0 0 1px rgba(99,102,241,0.12)", display: "flex", flexDirection: "column", gap: 4 }; const chipLbl: React.CSSProperties = { fontSize: 9, fontWeight: 800, color: "#64748b", textTransform: "uppercase", letterSpacing: ".8px" }; const chipVal: React.CSSProperties = { fontSize: 12.5, fontWeight: 700, color: "#0f172a", wordBreak: "break-all" }; return (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: "fixed", inset: 0, zIndex: 10000, background: "rgba(15,23,42,0.55)", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }}>
{/* ── Left Panel ── */}
{initials(selectedRow.clientName)}
{selectedRow.clientName || "N/A"}
{String(selectedRow.mobile)}
{selectedRow.email || "(No Email Address)"}
{selectedRow.dataSource?.label || "(N/A)"}
ID: {selectedRow.initialid || selectedRow.id || "—"}
Call History · {calls.length} call{calls.length !== 1 ? "s" : ""}
{calls.map((call, ci) => { const status = call.finalleadoutcome || call.callstatus || call.finalStatus?.label || ""; const st = getStatusStyle(status); const isFirst = ci === 0; return (
setActiveIndex(ci)} style={{ display: "flex", gap: 10, padding: "10px 16px", cursor: "pointer", borderLeft: `3px solid ${activeIndex === ci ? "#6366f1" : "transparent"}`, background: activeIndex === ci ? "#f0f4ff" : "transparent", transition: "background .15s" }}>
{ci < calls.length - 1 &&
}
{getFullTime(call)}
{call.id}
{status && {status}} {Number(call.callduration) > 0 && {call.callduration}s} {isFirst && LATEST}
); })}
{/* ── Right Panel ── */}
{!ac ? (
Select a call to view details
) : (
{acFullTime} {acStatus && (
{acStatus}
)}
Call Information
{[ { label: "Initial ID", value: ac.initialid }, { label: "Call ID", value: ac.id }, { label: "Call Start Time", value: acFullTime }, { label: "Call Duration", value: ac.callduration ? `${ac.callduration}` : "" }, { label: "Call Type", value: ac.calltype }, { label: "Call Start", value: ac.callstarttime }, { label: "Call End", value: ac.callendtime }, { label: "Call End Reason", value: ac.callendreason }, { label: "Lead Status", value: ac.leadstatus }, { label: "Lead Intent", value: ac.cutomerintent }, { label: "Company", value: ac.company }, { label: "Call Transcription", value: ac.transcription && ac.ivrUrl ? "View Transcription" : "" }, ].filter(f => f.value && String(f.value).trim() && String(f.value).trim() !== "0" && String(f.value).trim() !== "—") .map(f => (
{f.label}
{f.label === "Call Transcription" ? (
window.open(ac.viewUrl || ac.transcription)}>{f.value}
) : (
{String(f.value)}
)}
))}
{ac.ivrUrl && ac.ivrUrl !== "—" && ac.ivrUrl !== "-" && ( )} {ac.aicallsummary && (
AI Summary
{ac.aicallsummary}
)}
)}
{/* Footer */}
Enquiry Created {calls.length > 0 ? calls[calls.length - 1].dateTime : "—"}
Last Called {calls.length > 0 ? calls[0].dateTime : "—"}
Variance {calcVariance()}
{/* Notes sub-modal */} {showNotes && (
{ if (e.target === e.currentTarget) setShowNotes(false); }}>

Notes

{notes}
)}
); } // ─── Call Status Breakdown (Received) ──────────────────────────────────────── function CallStatusBreakdown({ counts, total, loading }: { counts: Record; total: number; loading: boolean }) { return (
Lead Outreach & Response Status
Callback Performance — Status & Outcome Breakdown
{loading &&
}
Received {loading ? "…" : total}
Callback Response Analysis
{loading ? (
{[...Array(6)].map((_, i) =>
)}
) : (
{STATUS_CFG.map(cfg => { const count = counts[cfg.key]; const pct = total > 0 ? ((count / total) * 100).toFixed(1) : "0.0"; const isEmpty = count === 0; return (
{ if (!isEmpty) { (e.currentTarget as HTMLDivElement).style.boxShadow = "0 4px 14px rgba(0,0,0,0.09)"; (e.currentTarget as HTMLDivElement).style.transform = "translateY(-1px)"; } }} onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = "none"; (e.currentTarget as HTMLDivElement).style.transform = "none"; }}>
{cfg.label}
{StatusIcons[cfg.key]}
{count}
{pct}%
); })}
)}
); } function formatSeconds(s: string | number) { const sec = parseInt(String(s)); if (isNaN(sec) || sec <= 0) return s || "—"; const h = Math.floor(sec / 3600); const m = Math.floor((sec % 3600) / 60); const rs = sec % 60; if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(rs).padStart(2, '0')}`; return `${m}:${String(rs).padStart(2, '0')}`; } // ─── Received Table ─────────────────────────────────────────────────────────── function ReceivedTableInnerNoHeader({ data, allData, sentData }: { data: ReceivedRow[]; allData: ReceivedRow[]; sentData: SentRow[] }) { const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); const [viewRow, setViewRow] = useState(null); const [historyRow, setHistoryRow] = useState(null); const [sortKey, setSortKey] = useState("timestamp"); const [sortDir, setSortDir] = useState<"asc" | "desc">("desc"); const handleSort = (k: string) => { if (sortKey === k) setSortDir(d => d === "asc" ? "desc" : "asc"); else { setSortKey(k); setSortDir("asc"); } setPage(1); }; const sorted = useMemo(() => { return [...data].sort((a, b) => { let av: string | number = "", bv: string | number = ""; if (sortKey === "timestamp") { av = a._ts_num ?? 0; bv = b._ts_num ?? 0; } else if (sortKey === "dateTime") { av = a._dt_num ?? 0; bv = b._dt_num ?? 0; } else if (sortKey === "clientName") { av = a.clientName.toLowerCase(); bv = b.clientName.toLowerCase(); } else if (sortKey === "mobile") { av = String(a.mobile); bv = String(b.mobile); } else if (sortKey === "callduration") { av = parseInt(String(a.callduration)) || 0; bv = parseInt(String(b.callduration)) || 0; } else if (sortKey === "callstatus") { av = a.callstatus.toLowerCase(); bv = b.callstatus.toLowerCase(); } else if (sortKey === "finalcallstatus") { av = a.finalcallstatus.toLowerCase(); bv = b.finalcallstatus.toLowerCase(); } else if (sortKey === "interestlevel") { av = a.interestlevel.toLowerCase(); bv = b.interestlevel.toLowerCase(); } else if (sortKey === "cutomerintent") { av = a.cutomerintent.toLowerCase(); bv = b.cutomerintent.toLowerCase(); } else if (sortKey === "finalleadoutcome") { av = a.finalleadoutcome.toLowerCase(); bv = b.finalleadoutcome.toLowerCase(); } else if (sortKey === "leadstatus") { av = a.leadstatus.toLowerCase(); bv = b.leadstatus.toLowerCase(); } else if (sortKey === "website") { av = a.website.toLowerCase(); bv = b.website.toLowerCase(); } else if (sortKey === "company") { av = a.company.toLowerCase(); bv = b.company.toLowerCase(); } else if (sortKey === "assignto") { av = (a.assignto || "").toLowerCase(); bv = (b.assignto || "").toLowerCase(); } if (av < bv) return sortDir === "asc" ? -1 : 1; if (av > bv) return sortDir === "asc" ? 1 : -1; return 0; }); }, [data, sortKey, sortDir]); useEffect(() => { setPage(1); }, [data]); const paged = sorted.slice((page - 1) * perPage, page * perPage); const sp = { sortKey, sortDir, onSort: handleSort }; return ( <> {viewRow && r.id === viewRow.id) ?? viewRow} onClose={() => setViewRow(null)} onCallHistory={() => setHistoryRow(viewRow)} />} {historyRow && setHistoryRow(null)} />}
Gen TimestampEnq Date & TimeClient DetailsData SourceCompanyDuration (H:M:S)StatusInterestLead StatusCustomer IntentFinal Lead OutcomeAssign To {paged.length === 0 ? ( ) : paged.map((row, i) => ( { (e.currentTarget as HTMLTableRowElement).style.background = "#e0e7ff"; (e.currentTarget as HTMLTableRowElement).style.boxShadow = "inset 3px 0 0 #4f46e5"; }} onMouseLeave={e => { (e.currentTarget as HTMLTableRowElement).style.background = ""; (e.currentTarget as HTMLTableRowElement).style.boxShadow = ""; }}> {row.subject}{row.dataSource.label} {row.aicallsummary} {row.cutomercontext}{row.scheduledtime} ))}
ID SubjectCall Recording Call StartCall End Call End Reason AI Summary Customer Context Scheduled Time Action
No records found
{row.timestamp} {row.dateTime}
{row.clientName}
{row.mobile &&
{row.mobile}
} {row.email &&
{row.email}
} 		{row.ivrUrl ?
window.open(row.ivrUrl)}>Download
: null} {row.viewUrl ?
window.open(row.viewUrl)}>View
: null} {!row.ivrUrl && !row.viewUrl && "—"} 		{row.company} {formatCallDateTime(row.callstarttime)} {formatCallDateTime(row.callendtime)} {formatSeconds(row.callduration)} {row.callendreason} {row.leadstatus || "—"} {row.assignto || "—"}
); } // ─── Date Helpers ───────────────────────────────────────────────────────────── function parseDMY(str: string): Date | null { if (!str || str === "—") return null; const m = str.match(/^(\d{2})\/(\d{2})\/(\d{4})/); if (!m) return null; return new Date(`${m[3]}-${m[2]}-${m[1]}`); } function getDateRange(filter: string): { from: Date | null; to: Date | null } { const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); switch (filter) { case "today": return { from: today, to: new Date(today.getTime() + 86400000 - 1) }; case "yesterday": { const y = new Date(today.getTime() - 86400000); return { from: y, to: new Date(today.getTime() - 1) }; } case "this_week": { const dow = today.getDay(); const mon = new Date(today.getTime() - ((dow === 0 ? 6 : dow - 1) * 86400000)); return { from: mon, to: new Date(mon.getTime() + 7 * 86400000 - 1) }; } case "last_week": { const dow = today.getDay(); const thisMonday = new Date(today.getTime() - ((dow === 0 ? 6 : dow - 1) * 86400000)); const lastMon = new Date(thisMonday.getTime() - 7 * 86400000); return { from: lastMon, to: new Date(thisMonday.getTime() - 1) }; } case "this_month": return { from: new Date(now.getFullYear(), now.getMonth(), 1), to: new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59) }; case "last_month": return { from: new Date(now.getFullYear(), now.getMonth() - 1, 1), to: new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59) }; case "this_year": return { from: new Date(now.getFullYear(), 0, 1), to: new Date(now.getFullYear(), 11, 31, 23, 59, 59) }; case "last_year": return { from: new Date(now.getFullYear() - 1, 0, 1), to: new Date(now.getFullYear() - 1, 11, 31, 23, 59, 59) }; default: return { from: null, to: null }; } } // ─── Main Page ──────────────────────────────────────────────────────────────── function ReceivedDataPageInner() { const { data: receivedApiData, loading: receivedLoading, isRefreshing: hookRefreshing, refetch: refetchReceived } = useReceivedLeads(); const { data: sentApiData, loading: sentLoading, refetch: refetchSent } = useSentLeads(); const { hasPermission } = useAuth(); const [isRefreshing, setIsRefreshing] = useState(false); const isRefreshingAny = isRefreshing || hookRefreshing; const handleRefresh = async () => { setIsRefreshing(true); await Promise.all([refetchReceived(), refetchSent()]); setIsRefreshing(false); }; const hasReceivedPermission = hasPermission("ai_voice_received.view"); const tableRef = useRef(null); const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); useEffect(() => { const h = setTimeout(() => setDebouncedSearch(search), 300); return () => clearTimeout(h); }, [search]); const [dateFilter, setDateFilter] = useState("this_week"); const [company, setCompany] = useState("all"); const [dataSource, setDataSource] = useState("all"); const [status, setStatus] = useState("all"); const [intent, setIntent] = useState("all"); const [leadStatus, setLeadStatus] = useState("all"); const [customDate, setCustomDate] = useState({ start: "", end: "" }); const clearFilters = () => { setSearch(""); setDateFilter("all"); setCompany("all"); setDataSource("all"); setStatus("all"); setIntent("all"); setLeadStatus("all"); setCustomDate({ start: "", end: "" }); }; useEffect(() => { if (tableRef.current) { tableRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); } }, [search, dateFilter, company, dataSource, status, intent, leadStatus]); const dateWindow = useMemo(() => { if (dateFilter === "custom") return { from: customDate.start ? new Date(customDate.start) : null, to: customDate.end ? new Date(customDate.end + "T23:59:59") : null }; return getDateRange(dateFilter); }, [dateFilter, customDate]); const companyMatch = (n: string) => company === "all" || n === company; const dsMatch = (l: string) => dataSource === "all" || l === dataSource; // ── Transform ───────────────────────────────────────────────────────────── const transformedReceived: ReceivedRow[] = useMemo(() => { if (!receivedApiData?.length) return receivedLoading ? RECEIVED_DATA : []; return receivedApiData.map(r => ({ ...r, _ts_num: parseDateTime(r.timestamp || ""), _dt_num: parseDateTime(r.dateTime || ""), dataSource: { label: r.dataSource || "—", color: "gray" as const }, finalStatus: { label: r.callstatus || "—", dot: (r.callstatus === "completed" ? "g" : r.callstatus === "failed" ? "r" : "o") as DotColor, color: (r.callstatus === "completed" ? "green" : r.callstatus === "failed" ? "red" : "orange") as PillColor, }, })); }, [receivedApiData, receivedLoading]); // Minimal sent transform — only enquiryId + notes needed for call history notes lookup const transformedSent: SentRow[] = useMemo(() => { if (!sentApiData?.length) return []; return sentApiData.map(r => ({ enquiryId: r.enquiryId, notes: r.notes || "—" })); }, [sentApiData]); // ── Deduplicate by initialid — keep latest per group ────────────────────── const processedReceived: ReceivedRow[] = useMemo(() => { const map = new Map(); const noId: ReceivedRow[] = []; transformedReceived.forEach(row => { const id = (row.initialid || "").trim(); if (!id || id === "—" || id === "null") { noId.push(row); return; } if (!map.has(id)) map.set(id, []); map.get(id)!.push(row); }); const result: ReceivedRow[] = []; map.forEach(rows => { if (rows.length === 1) { result.push(rows[0]); } else { const latest = rows.reduce((prev, curr) => getRowSortTime(curr) > getRowSortTime(prev) ? curr : prev); result.push(latest); } }); return [...result, ...noId]; }, [transformedReceived]); // pendingCount = sent total − received processed total const pendingCount = Math.max(0, transformedSent.length - processedReceived.length); // ── Filter Options ──────────────────────────────────────────────────────── const companyOptions = useMemo(() => Array.from(new Set(processedReceived.map(r => r.company))).filter(v => v && v !== "—").sort(), [processedReceived]); const dataSourceOptions = useMemo(() => Array.from(new Set(processedReceived.map(r => r.dataSource.label))).filter(v => v && v !== "—").sort(), [processedReceived]); const statusOptions = useMemo(() => { const keys = new Set(); processedReceived.forEach(r => keys.add(getRowStatus(r))); return STATUS_CFG.filter(c => keys.has(c.key)).map(c => c.label); }, [processedReceived]); const leadStatusOptions = useMemo(() => Array.from(new Set(processedReceived.map(r => r.leadstatus))).filter(v => v && v !== "—").sort(), [processedReceived]); // ── Filtered Data ───────────────────────────────────────────────────────── const filteredReceived = useMemo(() => { const q = debouncedSearch.trim().toLowerCase(); return processedReceived.filter(r => { if (q && !( r.clientName.toLowerCase().includes(q) || String(r.mobile).includes(q) || r.email.toLowerCase().includes(q) || r.id.toLowerCase().includes(q) || r.subject.toLowerCase().includes(q) || r.website.toLowerCase().includes(q) || r.aicallsummary.toLowerCase().includes(q) || r.transcription.toLowerCase().includes(q) || r.notes.toLowerCase().includes(q) )) return false; if (dateWindow.from || dateWindow.to) { const ts = parseDateTime(r.timestamp); if (!ts) return true; if (dateWindow.from && ts < dateWindow.from.getTime()) return false; if (dateWindow.to && ts > dateWindow.to.getTime()) return false; } if (!companyMatch(r.company)) return false; if (!dsMatch(r.dataSource.label)) return false; if (status !== "all") { const cfg = STATUS_CFG.find(c => c.label === status); if (cfg && getRowStatus(r) !== cfg.key) return false; } if (intent !== "all" && r.cutomerintent.toLowerCase() !== intent.toLowerCase()) return false; if (leadStatus !== "all" && r.leadstatus !== leadStatus) return false; return true; }); }, [debouncedSearch, dateWindow, company, dataSource, status, intent, leadStatus, processedReceived]); const receivedCounts = useMemo(() => buildReceivedCounts(filteredReceived, pendingCount), [filteredReceived, pendingCount]); if (receivedLoading && receivedApiData.length === 0) { return (
Loading

Fetching latest AI Voice Call Data...

); } if (!hasReceivedPermission) { return (
🔒
Access Restricted
You don't have permission to view received calls.
); } return (
{/* ── Banner ── */}
AI Voice Lead Qualification
KServe AI · Received Calls — Real-time Lead Scoring Log
{hookRefreshing && !isRefreshing && (
Background Syncing...
)}
{/* ── Filters ── */}

Filters & Search

Refine and locate leads efficiently

setSearch(e.target.value)} className="h-10 w-full rounded-md border-gray-300" />
{/* Lead Intent & Lead Status — received-only filters */}
{/* Custom date range */} {dateFilter === "custom" && (
setCustomDate({ ...customDate, start: e.target.value })} className="h-10 w-full rounded-md border-gray-300" />
setCustomDate({ ...customDate, end: e.target.value })} className="h-10 w-full rounded-md border-gray-300" />
)}
{/* ── KPI Breakdown ── */}
{/* ── Table ── */}
Received Voice Responses — KServe Callback Log
{(receivedLoading && filteredReceived.length === 0) ?
Loading received data from KServe...
: }
); } export default function ReceivedDataPage() { return ( Loading...
}> ); }