import { useState, useEffect, useRef, useCallback } from "react"; // ─── Mock Data ────────────────────────────────────────────────────────────── const MOCK_USER = { name: "Sarah Mitchell", email: "smitchell@jnj.com", department: "Manufacturing Operations", site: "2847", siteName: "Janssen Beerse", role: "Site Service Owner", avatar: "SM", }; const HISTORICAL_TICKETS = [ { id: "RITM0041287", jiraKey: "ABFZ-3421", type: "Network Request", title: "LAN/WAN Port Enablement – Building 4, Floor 2", site: "2847", status: "Completed", date: "2025-11-14", similarity: 0.94, description: "Enable 24 new LAN drops in Building 4, Floor 2 for new lab workstations. Switch: SW-BLD4-F2-01. ICE network zone.", priority: "P3", assignedTo: "Pete Ward", assignedEmail: "pward@jnj.com", capabilityCenter: "Approved Project Demand", nexusId: "NX-2024-0891", completionDays: 14, complexityTier: "SIMPLE", complexityItems: 3, costEstimate: { baseCost: 18400, geoMultiplier: 1.0, geoRegion: "US", networkSurcharge: 2400, firewallFee: 0, medDeviceCompliance: 0, totalEstimated: 20800, confidence: 0.89, }, quotation: { vendor: "Panduit Corporation", invoiceNumber: "INV-2025-PAN-1184", invoiceDate: "2025-10-28", poNumber: "PO-4500923187", lineItems: [ { desc: "Cat6A Patch Cable (10ft)", qty: 24, unitCost: 28.50, total: 684.00 }, { desc: "RJ45 Keystone Jack (Cat6A)", qty: 48, unitCost: 12.00, total: 576.00 }, { desc: "Cable Drop Installation (per drop)", qty: 24, unitCost: 450.00, total: 10800.00 }, { desc: "Switch Port Activation (per port)", qty: 24, unitCost: 75.00, total: 1800.00 }, { desc: "Network Testing & Certification", qty: 1, unitCost: 2500.00, total: 2500.00 }, { desc: "Project Management", qty: 1, unitCost: 2040.00, total: 2040.00 }, ], subtotal: 18400.00, tax: 0, total: 18400.00, pdfFileName: "AESR_Panduit_OCT_28_2025.pdf", }, }, { id: "RITM0039854", jiraKey: "ABFZ-3198", type: "Solution Intake", title: "mPOD Deployment – Clean Room Monitoring System", site: "2847", status: "In Progress", date: "2025-12-02", similarity: 0.72, description: "Deploy mPOD sensors across clean room facilities for real-time environmental monitoring. Integration with existing SCADA system required.", priority: "P2", assignedTo: "Joe Ryan", assignedEmail: "jryan3@jnj.com", capabilityCenter: "Agile Demand", nexusId: "NX-2025-0134", completionDays: 18, complexityTier: "COMPLEX", complexityItems: 28, costEstimate: { baseCost: 98200, geoMultiplier: 1.0, geoRegion: "US", networkSurcharge: 4200, firewallFee: 0, medDeviceCompliance: 14730, totalEstimated: 117130, confidence: 0.92, }, quotation: { vendor: "Crown Equipment Corporation", invoiceNumber: "INV-2024-AESR-0847", invoiceDate: "2024-08-08", poNumber: "PO-4500891234", lineItems: [ { desc: "InfoLink Terminal IT5000 (forklift-mounted)", qty: 24, unitCost: 1850.00, total: 44400.00 }, { desc: "InfoLink Gateway Server (rack-mount)", qty: 2, unitCost: 6500.00, total: 13000.00 }, { desc: "Wireless Access Point (industrial-grade)", qty: 8, unitCost: 1200.00, total: 9600.00 }, { desc: "Installation & Configuration (per unit)", qty: 34, unitCost: 350.00, total: 11900.00 }, { desc: "Crown InfoLink Software License (annual)", qty: 24, unitCost: 450.00, total: 10800.00 }, { desc: "Project Management & Training", qty: 1, unitCost: 8500.00, total: 8500.00 }, ], subtotal: 98200.00, tax: 0, total: 98200.00, pdfFileName: "AESR_Crown_Equipment_AUG_08_2024.pdf", }, }, { id: "RITM0038221", jiraKey: "ABFZ-2987", type: "Network Request", title: "Firewall MACD – Vendor VPN Access for Site 2847", site: "2847", status: "Pending Approval", date: "2026-01-08", similarity: 0.67, description: "Open firewall rules for vendor VPN tunnel. Vendor: Siemens AG. Required for PLC programming access during March shutdown.", priority: "P2", assignedTo: "Katherine Diaz", assignedEmail: "kdiaz2@jnj.com", capabilityCenter: "TS Internal Demand", completionDays: 8, complexityTier: "MEDIUM", complexityItems: 12, costEstimate: { baseCost: 8400, geoMultiplier: 1.3, geoRegion: "EU", networkSurcharge: 0, firewallFee: 3200, medDeviceCompliance: 0, totalEstimated: 14120, confidence: 0.85, }, quotation: { vendor: "Siemens AG", invoiceNumber: "INV-2025-SIE-2901", invoiceDate: "2025-12-15", poNumber: "PO-4500934521", lineItems: [ { desc: "Firewall Rule Configuration (per rule)", qty: 8, unitCost: 450.00, total: 3600.00 }, { desc: "VPN Tunnel Setup & Configuration", qty: 1, unitCost: 2800.00, total: 2800.00 }, { desc: "Security Assessment & Pen Test", qty: 1, unitCost: 1500.00, total: 1500.00 }, { desc: "Documentation & Compliance", qty: 1, unitCost: 500.00, total: 500.00 }, ], subtotal: 8400.00, tax: 0, total: 8400.00, pdfFileName: "AESR_Siemens_DEC_15_2025.pdf", }, }, ]; const LIVE_TICKET = { id: "RITM0041287", jiraKey: "ABFZ-3421", title: "LAN/WAN Port Enablement – Building 4, Floor 2", status: "In Progress", priority: "P3", createdDate: "2025-11-14", updatedDate: "2026-02-14", estimatedCompletion: "2026-02-28", complexityTier: "SIMPLE", totalCost: "$20,800", assignedTo: { name: "Pete Ward", email: "pward@jnj.com", phone: "+1 (732) 555-0147", team: "MLL Network Team" }, approver: { name: "Katherine Diaz", email: "kdiaz2@jnj.com" }, timeline: [ { date: "2025-11-14", event: "RITM Created", status: "complete", agent: "System" }, { date: "2025-11-14", event: "Jira Epic ABFZ-3421 auto-created", status: "complete", agent: "IRIS Automation" }, { date: "2025-11-18", event: "Gather User Stories task assigned", status: "complete", agent: "Service Owner" }, { date: "2025-12-02", event: "Network RITM created & linked", status: "complete", agent: "Sarah Mitchell" }, { date: "2025-12-09", event: "Reviewed on intake triage call", status: "complete", agent: "Katherine Diaz" }, { date: "2026-01-06", event: "Approved – assigned to Pete Ward's team", status: "complete", agent: "Pete Ward" }, { date: "2026-01-20", event: "Switch configuration in progress", status: "active", agent: "Network Team" }, { date: "2026-02-28", event: "Target: Cable drops installation", status: "pending", agent: "Vendor" }, ], }; const COMPLEXITY_CONFIG = { SIMPLE: { color: "#4ade80", bg: "rgba(34,197,94,0.12)", border: "rgba(34,197,94,0.3)", icon: "🟢", label: "Simple", items: "1–5 items", range: "$5K–$25K", days: "12–15 days", agents: ["Intake Agent", "Status Agent"] }, MEDIUM: { color: "#fbbf24", bg: "rgba(251,191,36,0.12)", border: "rgba(251,191,36,0.3)", icon: "🟡", label: "Medium", items: "5–20 items", range: "$25K–$100K", days: "15–18 days", agents: ["Intake Agent", "Network Agent", "Status Agent"] }, COMPLEX: { color: "#f87171", bg: "rgba(248,113,113,0.12)", border: "rgba(248,113,113,0.3)", icon: "🔴", label: "Complex", items: "20+ items", range: "$100K–$500K+", days: "18–20+ days", agents: ["Intake Agent", "Network Agent", "Knowledge Agent", "Status Agent", "Escalation to Human"] }, }; const CLASSIFICATION_STAGES = [ { name: "NER", label: "Entity Recognition", icon: "🔍", desc: "Extracting: SITE, REQUEST_TYPE, COMPONENT" }, { name: "Ontology", label: "Ontology Reasoning", icon: "🧠", desc: "SWRL rules → Network Request detected" }, { name: "Embedding", label: "Semantic Matching", icon: "📊", desc: "384-dim cosine similarity (>0.87)" }, { name: "Context", label: "Graph Enrichment", icon: "🔗", desc: "Team patterns & resolution history" }, ]; // ─── Icons ────────────────────────────────────────────────────────────────── const Icons = { Send: () => , Bot: () => , Check: () => , Phone: () => , Mail: () => , Edit: () => , Track: () => , Sparkle: () => , Arrow: () => , PDF: () => , Dollar: () => , ChevDown: () => , ChevUp: () => , Upload: () => , }; const fmt = (n) => "$" + n.toLocaleString("en-US", { minimumFractionDigits: 0 }); // ─── Typing Indicator ─────────────────────────────────────────────────────── const TypingIndicator = () => (
{[0, 1, 2].map((i) =>
)}
); // ─── Complexity Tier Badge ────────────────────────────────────────────────── const ComplexityBadge = ({ tier, size = "sm" }) => { const c = COMPLEXITY_CONFIG[tier]; if (!c) return null; const isSm = size === "sm"; return ( {c.icon} {c.label} ); }; // ─── PDF Invoice Viewer ───────────────────────────────────────────────────── const InvoiceViewer = ({ quotation, isExpanded, onToggle }) => { if (!quotation) return null; return (
{isExpanded && (
{[["Invoice #", quotation.invoiceNumber], ["PO #", quotation.poNumber], ["Vendor", quotation.vendor]].map(([k, v]) => (
{k}
{v}
))}
{["Line Item", "Qty", "Unit Cost", "Total"].map((h) => ( ))} {quotation.lineItems.map((item, i) => ( ))}
{h}
{item.desc} {item.qty} {fmt(item.unitCost)} {fmt(item.total)}
TOTAL {fmt(quotation.total)}
)}
); }; // ─── Cost Estimation Card ─────────────────────────────────────────────────── const CostEstimationCard = ({ ticket }) => { const c = ticket.costEstimate; const tier = COMPLEXITY_CONFIG[ticket.complexityTier]; return (
AI Cost Estimation 65% confidence · instant
{/* Complexity Tier Info */}
SCOPE
{ticket.complexityItems} items → {tier.label}
RANGE
{tier.range}
TIMELINE
{tier.days}
{/* Cost Formula Breakdown */}
Est_Cost = Σ(Unit×Qty) × Geo({c.geoRegion} {c.geoMultiplier}x) + Surcharges
{/* Line items breakdown */}
{[ ["Base Cost (from invoice)", c.baseCost, "#e2e8f0"], [`Geo Multiplier (${c.geoRegion})`, `×${c.geoMultiplier}`, "#fbbf24"], ["Network Surcharge", c.networkSurcharge, "#818cf8"], ["Firewall Fee", c.firewallFee, "#818cf8"], ["Med Device Compliance (+15%)", c.medDeviceCompliance, c.medDeviceCompliance > 0 ? "#f87171" : "#475569"], ].map(([label, val, color]) => (
{label} {typeof val === "number" ? fmt(val) : val}
))}
{/* Total */}
TOTAL ESTIMATED COST {fmt(c.totalEstimated)}
{/* Agents Called for this Tier */}
Agents Activated for {tier.label} Tier
{tier.agents.map((a) => ( {a} ))}
); }; // ─── Classification Pipeline Visual ───────────────────────────────────────── const ClassificationPipeline = ({ activeStage, completedStages }) => (
4-Stage Semantic Classification
{CLASSIFICATION_STAGES.map((stage, i) => { const isComplete = completedStages.includes(i); const isActive = activeStage === i; return (
{stage.icon}
{stage.label}
{(isActive || isComplete) &&
{stage.desc}
} {isActive &&
}
); })}
); // ─── Ticket Card ──────────────────────────────────────────────────────────── const TicketCard = ({ ticket, onSelect, onTrack, compact, expandedInvoice, onToggleInvoice }) => { const statusColor = { Completed: "#4ade80", "In Progress": "#fbbf24", "Pending Approval": "#f97316" }[ticket.status] || "#94a3b8"; return (
{ e.currentTarget.style.borderColor = "rgba(99,102,241,0.4)"; e.currentTarget.style.background = "rgba(99,102,241,0.04)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)"; e.currentTarget.style.background = "rgba(255,255,255,0.03)"; }} > {/* Top row: match + complexity */}
{ticket.id} → {ticket.jiraKey}
{ticket.similarity && ( 0.9 ? "rgba(34,197,94,0.15)" : "rgba(251,191,36,0.15)", color: ticket.similarity > 0.9 ? "#4ade80" : "#fbbf24", fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 20, }}>{Math.round(ticket.similarity * 100)}% match )}
{ticket.title}
{!compact &&
{ticket.description}
} {/* Tags row */}
{ticket.status} {ticket.type} {ticket.priority} {fmt(ticket.costEstimate.totalEstimated)} ~{ticket.completionDays}d
{/* PDF Invoice Viewer */} {ticket.quotation && !compact && ( onToggleInvoice?.(ticket.id)} /> )} {/* Action buttons */} {(onSelect || onTrack) && (
{onSelect && ( )} {onTrack && ( )}
)}
); }; // ─── Live Tracker ─────────────────────────────────────────────────────────── const LiveTracker = ({ ticket, onBack }) => (
{ticket.id} → {ticket.jiraKey}
{ticket.title}
{ticket.status}
{[["Priority", `${ticket.priority} – Standard`], ["Est. Cost", ticket.totalCost], ["Est. Completion", ticket.estimatedCompletion]].map(([k, v]) => (
{k}
{v}
))}
{/* Contacts */}
{[ticket.assignedTo, ticket.approver].map((p, i) => (
{i === 0 ? "Assigned To" : "Approver"}
{p.name}
{p.team &&
{p.team}
}
Email {p.phone && Call}
))}
{/* Timeline */}
Live Timeline
{ticket.timeline.map((item, i) => (
{item.status === "complete" && }
{i < ticket.timeline.length - 1 &&
}
{item.event}
{item.date} · {item.agent}
))}
); // ─── Smart Form ───────────────────────────────────────────────────────────── const SmartForm = ({ ticket, onSubmit, onCancel }) => { const [fields, setFields] = useState({ site: ticket?.site || MOCK_USER.site, title: ticket?.title || "", description: ticket?.description || "", type: ticket?.type || "Network Request", priority: ticket?.priority || "P3", capabilityCenter: ticket?.capabilityCenter || "", nexusId: ticket?.nexusId || "", networkType: "LAN/WAN", cableDrops: "24", switchName: "", iceNetwork: "Yes", }); const [uploadedFile, setUploadedFile] = useState(ticket?.quotation?.pdfFileName || null); const handleChange = (k, v) => setFields((p) => ({ ...p, [k]: v })); const fs = { width: "100%", padding: "8px 12px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.04)", color: "#e2e8f0", fontSize: 12, fontFamily: "inherit", outline: "none", boxSizing: "border-box" }; const ls = { fontSize: 10, fontWeight: 600, color: "#94a3b8", textTransform: "uppercase", letterSpacing: 1, marginBottom: 4, display: "block" }; return (
{ticket ? "Edit Previous Request" : "New Request Form"} {ticket && Pre-filled from {ticket.id}}
handleChange("site", e.target.value)} />
handleChange("title", e.target.value)} />
handleChange("nexusId", e.target.value)} placeholder="NX-YYYY-NNNN" />
handleChange("cableDrops", e.target.value)} />