"use client"; import { useState, useMemo, useEffect, useRef, Suspense } from "react"; 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 { genTimestamp: string; enqDateTime: string; enquiryId: string; clientName: string; mobile: string | number; email: string; subject: string; notes: string; ivrUrl: string; websiteName: string; dataSource: { label: string; color: PillColor }; campaignId: string; campaignName: string; assignTo: string; kserveResponse: string; kserveError?: boolean; transferTo: string; statusCode: string; _ts_num: number; _dt_num: number; status: { label: string; dot: DotColor; color: PillColor }; company: string; region: string; } type PillColor = "green" | "blue" | "purple" | "orange" | "red" | "yellow" | "gray" | "teal" | "indigo" | "pink"; type DotColor = "g" | "o" | "r" | "b" | "x"; // ─── Mock / Fallback Data ───────────────────────────────────────────────────── const SENT_DATA: SentRow[] = [ { genTimestamp: "16/03/2026", enqDateTime: "16/03/2026 07:11", enquiryId: "Test_Ticket_001", clientName: "Satyam", mobile: "+91 73006 16307", email: "satyam@kairali.com", subject: "Enquiry From Chatbase AI", notes: "User inquired about Ayurvedic treatments.", ivrUrl: "kairali-dclkqAHV", websiteName: "Kairali AHV", dataSource: { label: "AI-Doctor", color: "indigo" }, campaignId: "Required AHk", campaignName: "AHV Wellness 2026", assignTo: "Pushpanjali K.", kserveResponse: "200 OK", transferTo: "—", statusCode: "success", _ts_num: 1742079060000, _dt_num: 1742079060000, status: { label: "Success", dot: "g", color: "green" }, company: "Kairali", region: "domestic" }, { genTimestamp: "17/03/2026", enqDateTime: "17/03/2026 09:22", enquiryId: "Ticket_002-Xa7f", clientName: "Priya Sharma", mobile: "+91 98765 43210", email: "priya@example.com", subject: "Enquiry From IVR", notes: "Call Duration 2m 15s.", ivrUrl: "kairali-xf91bPR", websiteName: "Kairali KTAHV", dataSource: { label: "IVR API", color: "blue" }, campaignId: "WL-Kairali-02", campaignName: "Pain Management Prog.", assignTo: "Harpreet S.", kserveResponse: "200 OK", transferTo: "Sunita R.", statusCode: "success", _ts_num: 1742183520000, _dt_num: 1742183520000, status: { label: "Success", dot: "g", color: "green" }, company: "KTAHV", region: "domestic" }, { genTimestamp: "17/03/2026", enqDateTime: "17/03/2026 11:05", enquiryId: "Ticket_003-Bm2k", clientName: "Ramesh Gupta", mobile: "+91 70011 22334", email: "ramesh@example.com", subject: "Enquiry From Facebook", notes: "Diet and detox programs.", ivrUrl: "kairali-fb9cRG", websiteName: "Kairali KTAHV", dataSource: { label: "Facebook", color: "purple" }, campaignId: "FB-AHV-2026", campaignName: "Senior Wellness Camp.", assignTo: "Anoop V.", kserveResponse: "200 OK", transferTo: "—", statusCode: "success", _ts_num: 1742189700000, _dt_num: 1742189700000, status: { label: "Success", dot: "g", color: "green" }, company: "KTAHV", region: "domestic" }, ]; // ─── 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 TruncTd({ children, maxWidth = 140 }: { children: React.ReactNode; maxWidth?: number }) { 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}
)} ); } // ─── 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 SendSvg = ({ sz = 13 }: { sz?: number }) => ; const MicSvg = () => ; const PhoneSvg = () => ; // ─── Sent KPI Helpers ───────────────────────────────────────────────────────── function buildSentCounts(rows: SentRow[]): any { const res = { total: 0, ktahv: { total: 0, dom: 0, intl: 0 }, kappl: { total: 0, dom: 0, intl: 0 }, villaraag: { total: 0, dom: 0, intl: 0 }, kac: { total: 0, dom: 0, intl: 0 }, pending: 0 }; rows.forEach(r => { const c = String(r.company || "").toUpperCase(); const reg = String(r.region || "").toUpperCase(); const s = String(r.status.label || "").toLowerCase(); if (s.includes("pending")) res.pending++; const isIntl = reg.includes("INTERNATIONAL"); if (c.includes("KTAHV")) { res.ktahv.total++; if (isIntl) res.ktahv.intl++; else res.ktahv.dom++; } else if (c.includes("KAPPL")) { res.kappl.total++; if (isIntl) res.kappl.intl++; else res.kappl.dom++; } else if (c.includes("VILLARAAG") || c.includes("VILLA RAAG")) { res.villaraag.total++; if (isIntl) res.villaraag.intl++; else res.villaraag.dom++; } else if (c.includes("KAC")) { res.kac.total++; if (isIntl) res.kac.intl++; else res.kac.dom++; } }); res.total = res.ktahv.total + res.kappl.total + res.villaraag.total + res.kac.total; return res; } // ─── Call Status Breakdown (Sent) ───────────────────────────────────────────── function CallStatusBreakdown({ counts, total, loading }: { counts: any; total: number; loading: boolean }) { const data = counts as { total: number; ktahv: { total: number; dom: number; intl: number }; kappl: { total: number; dom: number; intl: number }; villaraag: { total: number; dom: number; intl: number }; kac: { total: number; dom: number; intl: number }; pending: number }; const CompanyCard = ({ label, stats, icon, color }: { label: string; stats: { total: number; dom: number; intl: number }; icon: string; color: string }) => { const getPctOfCompany = (val: number) => stats.total > 0 ? ((val / stats.total) * 100).toFixed(1) : "0.0"; const getPctOfGlobal = () => data.total > 0 ? ((stats.total / data.total) * 100).toFixed(1) : "0.0"; return (
{label}
{getPctOfGlobal()}%
{icon}
{stats.total}
Domestic: {stats.dom} ({getPctOfCompany(stats.dom)}%)
International: {stats.intl} ({getPctOfCompany(stats.intl)}%)
); }; return (
Lead Outreach & Response Status
Sent Performance — Company & Region Breakdown
{loading &&
}
Sent {loading ? "…" : total}
Outreach Distribution by Company
{loading ? (
{[...Array(5)].map((_, i) =>
)}
) : (
{/* Total Sent Card */}
Total Lead Sent
{data.total}
Global Automated Outreach
📊
{/* Pending Card */}
Pending
{data.total > 0 ? ((data.pending / data.total) * 100).toFixed(1) : "0"}%
⏳
{data.pending}
Total Pending Outreach
)}
); } // ─── Sent Table ─────────────────────────────────────────────────────────────── 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 SentTableInnerNoHeader({ data }: { data: SentRow[] }) { const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); const [sortKey, setSortKey] = useState("enqDateTime"); 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 === "enqDateTime") { av = parseDateTime(a.enqDateTime); bv = parseDateTime(b.enqDateTime); } else if (sortKey === "clientName") { av = a.clientName.toLowerCase(); bv = b.clientName.toLowerCase(); } else if (sortKey === "websiteName") { av = a.websiteName.toLowerCase(); bv = b.websiteName.toLowerCase(); } else if (sortKey === "dataSource") { av = a.dataSource.label.toLowerCase(); bv = b.dataSource.label.toLowerCase(); } else if (sortKey === "assignTo") { av = a.assignTo.toLowerCase(); bv = b.assignTo.toLowerCase(); } else if (sortKey === "company") { av = a.company.toLowerCase(); bv = b.company.toLowerCase(); } else if (sortKey === "status") { av = a.status.label.toLowerCase(); bv = b.status.label.toLowerCase(); } else if (sortKey === "campaignName") { av = a.campaignName.toLowerCase(); bv = b.campaignName.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 ( <>
Enq. Date & TimeClient DetailsWebsite NameData SourceCampaign NameCompanyAssign ToStatus {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.notes}{row.websiteName}{row.campaignName} ))}
Gen. Timestamp Enquiry ID SubjectNotesIVR URL Campaign ID KServe ResponseTransfer To
No records found
{row.genTimestamp}{row.enqDateTime} {row.enquiryId}
{row.clientName} {row.mobile} {row.email}
{row.ivrUrl && row.ivrUrl !== "—" && row.ivrUrl !== "-" ? ( window.open(row.ivrUrl, "_blank")} style={{ color: "#4f46e5", cursor: "pointer", textDecoration: "underline" }}>Download ) : ( - )} {row.campaignId} {row.company} {row.assignTo} {row.kserveResponse} {row.transferTo}
); } // ─── 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 }; } } function inRange(dateStr: string, from: Date | null, to: Date | null): boolean { if (!from && !to) return true; const d = parseDMY(dateStr); if (!d) return true; if (from && d < from) return false; if (to && d > to) return false; return true; } // ─── Main Page ──────────────────────────────────────────────────────────────── function SentDataPageInner() { const { data: sentApiData, loading: sentLoading, isRefreshing: hookRefreshing, refetch } = useSentLeads(); const { hasPermission } = useAuth(); const [isRefreshing, setIsRefreshing] = useState(false); const isRefreshingAny = isRefreshing || hookRefreshing; const handleRefresh = async () => { setIsRefreshing(true); await refetch(); setIsRefreshing(false); }; const hasSentPermission = hasPermission("ai_voice_sent.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 [customDate, setCustomDate] = useState({ start: "", end: "" }); const clearFilters = () => { setSearch(""); setDateFilter("all"); setCompany("all"); setDataSource("all"); setStatus("all"); setCustomDate({ start: "", end: "" }); }; useEffect(() => { if (tableRef.current) { tableRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); } }, [search, dateFilter, company, dataSource, status]); 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; const statusMatch = (l: string) => status === "all" || l === status; // ── Transform ───────────────────────────────────────────────────────────── const transformedSent: SentRow[] = useMemo(() => { if (!sentApiData?.length) return sentLoading ? SENT_DATA : []; return sentApiData.map(r => ({ genTimestamp: r.genTimestamp, enqDateTime: r.enqDateTime, _ts_num: r._ts_num, _dt_num: r._dt_num, enquiryId: r.enquiryId, clientName: r.clientName || "N/A", mobile: String(r.mobile || "—"), email: r.email || "—", subject: r.subject || "—", notes: r.notes || "—", ivrUrl: r.ivrUrl || "—", websiteName: r.websiteName || "—", dataSource: r.dataSource, campaignId: r.campaignId || "—", campaignName: r.campaignName || "—", assignTo: r.assignTo || "—", kserveResponse: r.kserveResponse || "—", kserveError: r.kserveError ?? false, transferTo: r.transferTo || "—", statusCode: r.statusCode || "—", status: r.status, company: r.company || "—", region: r.region || "—", })); }, [sentApiData, sentLoading]); // ── Filter Options ──────────────────────────────────────────────────────── const companyOptions = useMemo(() => Array.from(new Set(transformedSent.map(r => r.company))).filter(v => v && v !== "—").sort(), [transformedSent]); const dataSourceOptions = useMemo(() => Array.from(new Set(transformedSent.map(r => r.dataSource.label))).filter(v => v && v !== "—").sort(), [transformedSent]); const statusOptions = useMemo(() => Array.from(new Set(transformedSent.map(r => r.status.label))).filter(v => v && v !== "—").sort(), [transformedSent]); // ── Filtered Data ───────────────────────────────────────────────────────── const filteredSent = useMemo(() => { const q = debouncedSearch.trim().toLowerCase(); return transformedSent.filter(r => { if (q && !(r.clientName.toLowerCase().includes(q) || String(r.mobile).includes(q) || r.email.toLowerCase().includes(q) || r.enquiryId.toLowerCase().includes(q) || r.subject.toLowerCase().includes(q) || r.assignTo.toLowerCase().includes(q) || r.campaignName.toLowerCase().includes(q) || r.company.toLowerCase().includes(q))) return false; if (!inRange(r.enqDateTime, dateWindow.from, dateWindow.to)) return false; if (!companyMatch(r.company)) return false; if (!dsMatch(r.dataSource.label)) return false; if (!statusMatch(r.status.label)) return false; return true; }); }, [debouncedSearch, dateWindow, company, dataSource, status, transformedSent]); const sentCounts = useMemo(() => buildSentCounts(filteredSent), [filteredSent]); if (sentLoading && sentApiData.length === 0) { return (
Loading

Fetching latest AI Voice Call Data...

); } if (!hasSentPermission) { return (
🔒
Access Restricted
You don't have permission to view sent calls.
); } return (
{/* ── Banner ── */}
AI Voice Lead Qualification
KServe AI · Sent Calls — Automated Voice Outreach Log
{/* {hookRefreshing && !isRefreshing && (
Background Syncing...
)} */}
Total Records
{filteredSent.length}
{/* ── Filters ── */}

Filters & Search

Refine and locate leads efficiently

setSearch(e.target.value)} className="h-10 w-full rounded-md border-gray-300" />
{/* 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 ── */}
Sent Voice Calls — AI Outreach Log
{(sentLoading && filteredSent.length === 0) ?
Loading sent data from KServe...
: }
); } export default function SentDataPage() { return ( Loading...
}> ); }