PageSourceSearch

https://vagle.ai/assets/AdminCallDetail-XZGQjrOU.js

js vagle.ai collected 2026-10-05 13:13:02 UTC 11,828 bytes, 1 lines download raw bytes

1import{b as j,j as a}from"./index-CbtKD9GF.js";import{j as I,b as c,L as N}from"./vendor-gmoby7Lc.js";import{A as h}from"./AdminTheme-CI_qYGsE.js";import"./icons-BYq1EogD.js";import"./sparkles--5vRErnb.js";import"./chart-column-DTz6hlN3.js";import"./users-B-7dCcKT.js";const Y=()=>{const{id:m}=I(),[i,T]=c.useState(null),[w,p]=c.useState(!0),[v,S]=c.useState(null),[l,r]=c.useState("overview"),[o,u]=c.useState(""),[b,g]=c.useState(!1),[C,y]=c.useState(!1);c.useEffect(()=>{x()},[m]);const x=async()=>{try{p(!0);const e=localStorage.getItem("token"),n=await j.get(`/api/admin/calls/${m}`,{headers:{Authorization:`Bearer ${e}`}});n.data.success&&T(n.data)}catch(e){console.error("Error fetching call detail:",e),S(e.response?.data?.error||"Failed to load call details")}finally{p(!1)}},f=e=>{navigator.clipboard.writeText(e)},$=()=>{if(!i?.call?.transcript)return;const e=new Blob([i.call.transcript],{type:"text/plain"}),n=URL.createObjectURL(e),t=document.createElement("a");t.href=n,t.download=`transcript-${i.call.callId}.txt`,document.body.appendChild(t),t.click(),document.body.removeChild(t),URL.revokeObjectURL(n)},k=async()=>{try{y(!0);const e=localStorage.getItem("token");(await j.post(`/api/admin/calls/${m}/recalculate-cost`,{},{headers:{Authorization:`Bearer ${e}`}})).data.success&&await x()}catch(e){console.error("Error recalculating cost:",e)}finally{y(!1)}},A=async()=>{if(o.trim())try{g(!0);const e=localStorage.getItem("token");(await j.post(`/api/admin/calls/${m}/notes`,{note:o.trim()},{headers:{Authorization:`Bearer ${e}`}})).data.success&&(u(""),await x())}catch(e){console.error("Error adding note:",e)}finally{g(!1)}},M=e=>{if(!e)return"-";const n=Math.floor(e/60),t=e%60;return`${n}:${t.toString().padStart(2,"0")}`},d=e=>e==null?"-":`$${e.toFixed(4)}`,D=()=>!i?.timeline||i.timeline.length===0?a.jsx("div",{className:"admin-empty",children:"No timeline data available"}):a.jsx("div",{className:"admin-timeline",children:i.timeline.map((e,n)=>a.jsxs("div",{className:`admin-timeline-item admin-timeline-${e.type}`,children:[a.jsx("div",{className:"admin-timeline-marker"}),a.jsxs("div",{className:"admin-timeline-content",children:[a.jsxs("div",{className:"admin-timeline-header",children:[a.jsx("span",{className:"admin-timeline-label",children:e.label}),a.jsx("span",{className:"admin-timeline-time",children:new Date(e.timestamp).toLocaleTimeString()})]}),e.data&&a.jsx("div",{className:"admin-timeline-data",children:Object.entries(e.data).map(([t,E])=>a.jsxs("div",{className:"admin-timeline-data-item",children:[a.jsxs("span",{className:"admin-timeline-data-key",children:[t,":"]}),a.jsx("span",{className:"admin-timeline-data-value",children:String(E)})]},t))})]})]},n))});if(w)return a.jsx(h,{children:a.jsx("div",{className:"admin-loading",children:"Loading call details..."})});if(v)return a.jsx(h,{children:a.jsxs("div",{className:"admin-error",children:[a.jsxs("p",{children:["❌ ",v]}),a.jsx(N,{to:"/admin/calls",className:"admin-btn",children:"Back to Calls"})]})});const s=i?.call;return s?a.jsxs(h,{children:[a.jsxs("div",{className:"admin-header",children:[a.jsxs("div",{className:"admin-header-main",children:[a.jsxs("h1",{children:["Call Debug: ",s.callId]}),a.jsx("p",{children:"Detailed call analysis and timeline"})]}),a.jsxs("div",{className:"admin-header-actions",children:[a.jsx("button",{onClick:()=>f(s.callId),className:"admin-btn-secondary",children:"Copy Call ID"}),s.callSid&&a.jsx("button",{onClick:()=>f(s.callSid),className:"admin-btn-secondary",children:"Copy Call SID"}),s.transcript&&a.jsx("button",{onClick:$,className:"admin-btn-secondary",children:"Download Transcript"}),a.jsx("button",{onClick:k,disabled:C,className:"admin-btn-warning",children:C?"Recalculating...":"Recalculate Cost"}),a.jsx(N,{to:"/admin/calls",className:"admin-btn",children:"Back to Calls"})]})]}),a.jsxs("div",{className:"admin-tabs",children:[a.jsx("button",{onClick:()=>r("overview"),className:`admin-tab ${l==="overview"?"active":""}`,children:"Overview"}),a.jsx("button",{onClick:()=>r("transcript"),className:`admin-tab ${l==="transcript"?"active":""}`,children:"Transcript"}),a.jsx("button",{onClick:()=>r("usage"),className:`admin-tab ${l==="usage"?"active":""}`,children:"Usage & Cost"}),a.jsx("button",{onClick:()=>r("timeline"),className:`admin-tab ${l==="timeline"?"active":""}`,children:"Timeline"}),a.jsx("button",{onClick:()=>r("notes"),className:`admin-tab ${l==="notes"?"active":""}`,children:"Admin Notes"})]}),a.jsxs("div",{className:"admin-tab-content",children:[l==="overview"&&a.jsxs("div",{className:"admin-overview-grid",children:[a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Call Metadata"}),a.jsxs("div",{className:"admin-metadata-grid",children:[a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Call ID"}),a.jsx("span",{className:"admin-metadata-value",children:s.callId})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Call SID"}),a.jsx("span",{className:"admin-metadata-value",children:s.callSid||"-"})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Type"}),a.jsx("span",{className:`admin-badge admin-badge-${s.callType}`,children:s.callType})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Status"}),a.jsx("span",{className:`admin-badge admin-badge-${s.status==="completed"?"success":s.status==="failed"?"danger":"warning"}`,children:s.status})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Duration"}),a.jsx("span",{className:"admin-metadata-value",children:M(s.duration)})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"End Reason"}),a.jsx("span",{className:"admin-metadata-value",children:s.endReason||"-"})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Caller Number"}),a.jsx("span",{className:"admin-metadata-value",children:s.callerNumber||"-"})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Twilio Number"}),a.jsx("span",{className:"admin-metadata-value",children:s.twilioNumber||"-"})]})]})]}),a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"User & Assistant"}),a.jsxs("div",{className:"admin-metadata-grid",children:[a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"User"}),a.jsx("span",{className:"admin-metadata-value",children:s.user?`${s.user.fullName} (${s.user.email})`:"-"})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Assistant"}),a.jsx("span",{className:"admin-metadata-value",children:s.assistant?s.assistant.name:"-"})]})]})]}),a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Cost Summary"}),a.jsxs("div",{className:"admin-metadata-grid",children:[a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Total API Cost"}),a.jsx("span",{className:"admin-metadata-value admin-cost-highlight",children:d(s.totalApiCost)})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Cost Per Minute"}),a.jsx("span",{className:"admin-metadata-value",children:d(s.apiCostPerMinute)})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Has Estimated Usage"}),a.jsx("span",{className:`admin-badge ${s.hasEstimatedUsage?"admin-badge-warning":"admin-badge-success"}`,children:s.hasEstimatedUsage?"Yes":"No"})]}),a.jsxs("div",{className:"admin-metadata-item",children:[a.jsx("label",{children:"Missing Pricing"}),a.jsx("span",{className:`admin-badge ${s.hasMissingPricing?"admin-badge-danger":"admin-badge-success"}`,children:s.hasMissingPricing?"Yes":"No"})]})]})]})]}),l==="transcript"&&a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Call Transcript"}),s.transcript?a.jsx("div",{className:"admin-transcript",children:a.jsx("pre",{children:s.transcript})}):a.jsx("div",{className:"admin-empty",children:"No transcript available"})]}),l==="usage"&&a.jsxs("div",{className:"admin-usage-grid",children:[a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Usage Metering"}),i.usageMetering&&i.usageMetering.length>0?a.jsx("div",{className:"admin-usage-table",children:a.jsxs("table",{className:"admin-table",children:[a.jsx("thead",{children:a.jsxs("tr",{children:[a.jsx("th",{children:"Service"}),a.jsx("th",{children:"Provider"}),a.jsx("th",{children:"Model"}),a.jsx("th",{children:"Usage"}),a.jsx("th",{children:"Latency"}),a.jsx("th",{children:"Estimated"})]})}),a.jsx("tbody",{children:i.usageMetering.map((e,n)=>a.jsxs("tr",{children:[a.jsx("td",{children:a.jsx("span",{className:`admin-badge admin-badge-${e.serviceType}`,children:e.serviceType.toUpperCase()})}),a.jsx("td",{children:e.provider}),a.jsx("td",{children:e.model}),a.jsxs("td",{children:[e.serviceType==="llm"&&a.jsxs("div",{children:[a.jsxs("div",{children:["In: ",e.inputTokens]}),a.jsxs("div",{children:["Out: ",e.outputTokens]})]}),e.serviceType==="stt"&&a.jsxs("div",{children:[e.audioSeconds,"s"]}),e.serviceType==="tts"&&a.jsxs("div",{children:[a.jsxs("div",{children:[e.characters," chars"]}),a.jsxs("div",{children:[e.audioSeconds,"s"]})]})]}),a.jsx("td",{children:e.latencyMs?`${e.latencyMs}ms`:"-"}),a.jsx("td",{children:a.jsx("span",{className:`admin-badge ${e.estimated?"admin-badge-warning":"admin-badge-success"}`,children:e.estimated?"Yes":"No"})})]},n))})]})}):a.jsx("div",{className:"admin-empty",children:"No usage metering data"})]}),i.callCosts&&a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Cost Breakdown"}),a.jsxs("div",{className:"admin-cost-breakdown",children:[a.jsxs("div",{className:"admin-cost-item",children:[a.jsx("label",{children:"LLM Cost"}),a.jsx("span",{children:d(i.callCosts.llmCost)})]}),a.jsxs("div",{className:"admin-cost-item",children:[a.jsx("label",{children:"STT Cost"}),a.jsx("span",{children:d(i.callCosts.sttCost)})]}),a.jsxs("div",{className:"admin-cost-item",children:[a.jsx("label",{children:"TTS Cost"}),a.jsx("span",{children:d(i.callCosts.ttsCost)})]}),a.jsxs("div",{className:"admin-cost-item",children:[a.jsx("label",{children:"Twilio Cost"}),a.jsx("span",{children:d(i.callCosts.twilioCost)})]}),a.jsxs("div",{className:"admin-cost-item",children:[a.jsx("label",{children:"SMS Cost"}),a.jsx("span",{children:d(i.callCosts.smsCost)})]}),a.jsxs("div",{className:"admin-cost-item admin-cost-total",children:[a.jsx("label",{children:"Total API Cost"}),a.jsx("span",{children:d(i.callCosts.totalApiCost)})]})]})]})]}),l==="timeline"&&a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Call Timeline"}),D()]}),l==="notes"&&a.jsxs("div",{className:"admin-card",children:[a.jsx("h3",{children:"Admin Notes"}),a.jsxs("div",{className:"admin-add-note",children:[a.jsx("textarea",{value:o,onChange:e=>
1u(e.target.value),placeholder:"Add a support note...",className:"admin-note-textarea",rows:3}),a.jsx("button",{onClick:A,disabled:!o.trim()||b,className:"admin-btn",children:b?"Adding...":"Add Note"})]}),s.adminNotes&&s.adminNotes.length>0?a.jsx("div",{className:"admin-notes-list",children:s.adminNotes.map((e,n)=>a.jsxs("div",{className:"admin-note-item",children:[a.jsxs("div",{className:"admin-note-header",children:[a.jsx("span",{className:"admin-note-author",children:e.adminEmail}),a.jsx("span",{className:"admin-note-time",children:new Date(e.timestamp).toLocaleString()})]}),a.jsx("div",{className:"admin-note-content",children:e.note})]},n))}):a.jsx("div",{className:"admin-empty",children:"No admin notes"})]})]})]}):a.jsx(h,{children:a.jsxs("div",{className:"admin-error",children:[a.jsx("p",{children:"Call not found"}),a.jsx(N,{to:"/admin/calls",className:"admin-btn",children:"Back to Calls"})]})})};export{Y as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.