/* Tenant Outbound: dashboard + new-campaign wizard */ const { useEffect, useMemo, useState } = React; const OUTBOUND_TEMPLATES = [ { id: "appointment_reminders", icon: "calendar", name: "Appointment reminders", desc: "Call to confirm upcoming appointments. Reschedule if needed.", avg: "42s", conv: "72%" }, { id: "payment_followup", icon: "card", name: "Payment follow-up", desc: "Polite reminder for outstanding invoices. Accepts M-Pesa pay.", avg: "1m 12s", conv: "48%" }, { id: "lead_qualification", icon: "sparkles", name: "Lead qualification", desc: "Call new inbound leads within 60s. Qualify BANT. Book handoff.", avg: "2m 08s", conv: "31%" }, { id: "customer_checkin", icon: "bot", name: "Customer check-in", desc: "Proactive NPS-style call post-service. Flag detractors.", avg: "58s", conv: "64%" }, { id: "renewal_outreach", icon: "clock", name: "Renewal outreach", desc: "Auto-call 30/14/3 days before subscription ends.", avg: "1m 24s", conv: "58%" }, { id: "custom_campaign", icon: "sparkles", name: "Custom campaign", desc: "Start from a blank script. Use this when nothing above fits.", avg: "—", conv: "—" }, ]; const DIAL_DAY_LABELS = ["M", "T", "W", "T", "F", "S", "S"]; const WIZARD_STEPS = [ { id: 1, title: "Pick a template" }, { id: 2, title: "Who to call" }, { id: 3, title: "Review script" }, { id: 4, title: "When to dial" }, ]; const formatPercent = (v) => `${Math.max(0, Math.round(Number(v || 0) * 100))}%`; const OutboundPage = () => { const store = MK_USE(); const tenantNumbers = Array.isArray(store.tenantNumbers) ? store.tenantNumbers : []; const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const [campaignFilter, setCampaignFilter] = useState("all"); const [search, setSearch] = useState(""); const [campaigns, setCampaigns] = useState([]); const [mode, setMode] = useState("dashboard"); // dashboard | wizard const [step, setStep] = useState(1); const [selectedTemplateId, setSelectedTemplateId] = useState("appointment_reminders"); const [audienceSource, setAudienceSource] = useState("upload_csv"); const [uploadedCsvName, setUploadedCsvName] = useState(""); const [scriptDraft, setScriptDraft] = useState({ campaignName: "Appointment reminders", opening: "Hi {{name}}, it's Mikaka from {{business}}. Just confirming your appointment {{when}}. Still works for you?", tone: "Friendly, brief - no upsell.", }); const [dialWindow, setDialWindow] = useState({ timeOfDay: "Business hours (9am - 6pm EAT)", days: [0, 1, 2, 3, 4], startDialing: "Now", quietHours: true, maxAttempts: true, honorOptOut: true, requireApproval: false, }); const activeTemplate = useMemo( () => OUTBOUND_TEMPLATES.find((t) => t.id === selectedTemplateId) || OUTBOUND_TEMPLATES[0], [selectedTemplateId] ); const safeRun = async (fn) => { setError(""); setBusy(true); try { return await fn(); } catch (err) { setError(err?.message || "Something went wrong."); throw err; } finally { setBusy(false); } }; const loadCampaigns = async () => { const status = campaignFilter === "all" ? undefined : campaignFilter; const rows = await api.outbound.listCampaigns({ status }); setCampaigns(Array.isArray(rows) ? rows : []); }; useEffect(() => { loadCampaigns().catch(() => {}); }, [campaignFilter]); const filteredCampaigns = useMemo(() => { const term = search.trim().toLowerCase(); if (!term) return campaigns; return campaigns.filter((c) => String(c.name || "").toLowerCase().includes(term)); }, [campaigns, search]); const campaignStats = useMemo(() => { const active = campaigns.filter((c) => c.status === "active").length; const queued = campaigns.reduce((sum, c) => sum + Number(c.metadata?.queue_count || c.metadata?.queued || 0), 0); const completed = campaigns.reduce((sum, c) => sum + Number(c.metadata?.completed_7d || 0), 0); const pickupRateAvg = campaigns.length > 0 ? campaigns.reduce((sum, c) => sum + Number(c.metadata?.pickup_rate || 0), 0) / campaigns.length : 0.65; return { active, queued, completed, pickupRateAvg }; }, [campaigns]); const statusCount = useMemo(() => { const counts = { all: campaigns.length, active: 0, paused: 0, draft: 0 }; campaigns.forEach((c) => { const s = String(c.status || ""); if (s === "active") counts.active += 1; if (s === "paused") counts.paused += 1; if (s === "draft") counts.draft += 1; }); return counts; }, [campaigns]); const handleStepContinue = () => { if (step >= 4) return; setStep((s) => s + 1); }; const handleStepBack = () => { if (step <= 1) { setMode("dashboard"); return; } setStep((s) => s - 1); }; const handleLaunchCampaign = async () => { const fallbackNumberId = tenantNumbers[0]?.id ? String(tenantNumbers[0].id) : ""; if (!fallbackNumberId) { toast({ title: "Add a number first", body: "You need at least one tenant number to launch campaigns." }); return; } await safeRun(async () => { const payload = { name: scriptDraft.campaignName.trim(), description: activeTemplate.desc, mode: "campaign", source_number_id: fallbackNumberId, industry_slug: "generic", call_type: activeTemplate.id === "lead_qualification" ? "lead_qualification" : "generic_follow_up", warmth: "warm", objective: "inform_and_progress", max_concurrent_calls: 1, metadata: { audience_source: audienceSource, uploaded_csv_name: uploadedCsvName || null, pickup_rate: 0, queue_count: uploadedCsvName ? 540 : 0, }, script: { opening: scriptDraft.opening, tone_guidance: scriptDraft.tone, reason_summary_template: scriptDraft.opening, }, schedule: { time_of_day: dialWindow.timeOfDay, days_of_week: dialWindow.days, start_dialing: dialWindow.startDialing, quiet_hours: dialWindow.quietHours, }, }; await api.outbound.createCampaign(payload); toast({ title: "Campaign launched", body: `${payload.name} is ready.` }); setMode("dashboard"); setStep(1); await loadCampaigns(); }); }; const stepDone = (n) => step > n; const stepActive = (n) => step === n; const StatCard = ({ label, value, note, noteClass = "" }) => (
{label}
{value}
{note}
); const CampaignCard = ({ campaign }) => { const queue = Number(campaign.metadata?.queue_count || campaign.metadata?.queued || 0); const completed = Number(campaign.metadata?.completed || 0); const total = Math.max(queue + completed, 1); const progress = Math.min(100, Math.round((completed / total) * 100)); const pickupRate = Number(campaign.metadata?.pickup_rate || 0.41); const lastRun = campaign.updated_at ? new Date(campaign.updated_at).toLocaleString() : "—"; const badgeColor = campaign.status === "active" ? "var(--mk-success)" : campaign.status === "paused" ? "var(--mk-warning)" : "var(--fg-muted)"; return (
{campaign.name}
{(campaign.schedule?.time_of_day || "Daily")} · {(campaign.schedule?.timezone || "EAT")}
{campaign.status}
{completed} of {total} {progress}%
Queue
{queue}
Pickup
{formatPercent(pickupRate)}
Last run
{lastRun}
); }; const TemplateCard = ({ template, selected, onClick }) => ( ); const WizardStepPills = () => (
{WIZARD_STEPS.map((s) => { const done = stepDone(s.id); const active = stepActive(s.id); const dotBg = done ? "var(--mk-success)" : active ? "var(--mk-orange)" : "var(--bg-sunken)"; const dotColor = done || active ? "#fff" : "var(--fg-faint)"; return (
{done ? : s.id}
{s.title}
); })}
); if (mode === "wizard") { return (
Outbound

New outbound campaign

{step === 1 ? ( <>
Pick a starting point. You can edit every word of the script in the next steps.
{OUTBOUND_TEMPLATES.map((t) => ( { setSelectedTemplateId(t.id); setScriptDraft((s) => ({ ...s, campaignName: t.name })); }} /> ))}
) : null} {step === 2 ? ( <>
Where do the numbers come from?
{[ { id: "upload_csv", title: "Upload CSV", desc: "One phone number per row. 1,000 max for starter plan." }, { id: "google_sheets", title: "Google Sheets", desc: "Auto-refresh from a live sheet every hour." }, { id: "from_crm", title: "From CRM", desc: "Pull a saved segment from HubSpot / Salesforce / Zoho." }, { id: "filter_existing", title: "Filter existing", desc: "Past callers who match a filter. No import needed." }, ].map((source) => ( ))}
Drop your CSV or click to pick
Columns: name, phone (E.164), {{when}}, {{ref}}
{uploadedCsvName ? (
{uploadedCsvName}
) : null}
) : null} {step === 3 ? ( <>
Edit the opening line. Mikaka adapts everything after based on what the caller says.
setScriptDraft((s) => ({ ...s, campaignName: e.target.value }))} />