import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Progress } from '@/components/ui/progress'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; import { Link, router, Head } from '@inertiajs/react'; import { ArrowLeft, Play, Pause, Edit, Trash2, Phone, Clock, CheckCircle2, XCircle, RefreshCw, BarChart3, Save, Bot, Sparkles } from 'lucide-react'; import CSVUploadZone from '@/components/campaigns/csv-upload-zone'; import { DtmfAnalytics } from '@/components/campaigns/dtmf-analytics'; import { useEffect, useState } from 'react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import axios from 'axios'; import { ConfirmationModal } from '@/components/confirmation-modal'; interface Call { id: number; to_number: string; status: string; duration: number | null; created_at: string; } interface Contact { id: number; phone_number: string; first_name: string | null; last_name: string | null; status: string; } interface Campaign { id: number; name: string; type: 'text_to_speech' | 'voice_to_voice'; status: 'draft' | 'scheduled' | 'running' | 'paused' | 'completed' | 'failed'; message: string | null; language: string | null; voice: string | null; from_number: string; ai_agent?: { id: number; name: string; model: string; voice: string; active: boolean; } | null; enable_recording: boolean; enable_dtmf: boolean; max_concurrent_calls: number; retry_attempts: number; retry_delay_minutes: number; scheduled_at: string | null; started_at: string | null; completed_at: string | null; total_contacts: number; total_called: number; total_answered: number; total_failed: number; campaign_contacts_count: number; calls_count: number; created_at: string; expected_variables: string[] | null; campaign_variables: Record | null; } interface Props { campaign: Campaign & { calls: Call[]; campaign_contacts: Contact[]; audio_file?: { id: number; filename: string; } | null; }; dtmfStats?: { total: number; by_digit: Array<{ digit: string; label: string; count: number; percentage: number }>; by_action: Array<{ action: string; count: number; percentage: number }>; } | null; } const statusConfig: Record = { draft: { label: 'Draft', variant: 'outline' }, scheduled: { label: 'Scheduled', variant: 'secondary' }, running: { label: 'Running', variant: 'default' }, paused: { label: 'Paused', variant: 'secondary' }, completed: { label: 'Completed', variant: 'secondary' }, failed: { label: 'Failed', variant: 'destructive' }, }; export default function CampaignShow({ campaign, dtmfStats }: Props) { const [isRefreshing, setIsRefreshing] = useState(false); const [showTemplateDialog, setShowTemplateDialog] = useState(false); const [templateData, setTemplateData] = useState({ name: '', description: '', category: 'general' as 'promotional' | 'notification' | 'survey' | 'lead_qualification' | 'personalized' | 'general', }); const [isSavingTemplate, setIsSavingTemplate] = useState(false); const [templateError, setTemplateError] = useState(''); // Confirmation modal states const [confirmAction, setConfirmAction] = useState<{ open: boolean; title: string; description: string; onConfirm: () => void; variant?: 'default' | 'destructive'; }>({ open: false, title: '', description: '', onConfirm: () => {}, }); // Auto-refresh when campaign is running useEffect(() => { if (campaign.status !== 'running') return; const interval = setInterval(() => { router.reload({ only: ['campaign'] }); }, 5000); // Refresh every 5 seconds return () => clearInterval(interval); }, [campaign.status]); const handleRefresh = () => { setIsRefreshing(true); router.reload({ only: ['campaign'], onFinish: () => setIsRefreshing(false), }); }; const handleLaunch = () => { setConfirmAction({ open: true, title: 'Launch Campaign', description: 'Are you sure you want to launch this campaign? Calls will start being made to contacts.', onConfirm: () => { router.post(`/campaigns/${campaign.id}/launch`); setConfirmAction(prev => ({ ...prev, open: false })); }, }); }; const handlePause = () => { setConfirmAction({ open: true, title: 'Pause Campaign', description: 'Are you sure you want to pause this campaign? You can resume it later.', onConfirm: () => { router.post(`/campaigns/${campaign.id}/pause`); setConfirmAction(prev => ({ ...prev, open: false })); }, }); }; const handleResume = () => { setConfirmAction({ open: true, title: 'Resume Campaign', description: 'Are you sure you want to resume this campaign? Calls will continue.', onConfirm: () => { router.post(`/campaigns/${campaign.id}/resume`); setConfirmAction(prev => ({ ...prev, open: false })); }, }); }; const handleDelete = () => { setConfirmAction({ open: true, title: 'Delete Campaign', description: 'Are you sure you want to delete this campaign? This action cannot be undone.', variant: 'destructive', onConfirm: () => { router.delete(`/campaigns/${campaign.id}`); setConfirmAction(prev => ({ ...prev, open: false })); }, }); }; const handleOnDemandCall = () => { setConfirmAction({ open: true, title: 'Make On-Demand Call', description: 'This will immediately call the next pending contact WITHOUT using the queue. Use this to test if the calling system works.', onConfirm: () => { router.post(`/campaigns/${campaign.id}/on-demand-call`, {}, { preserveScroll: true, onSuccess: () => { // Refresh campaign data router.reload({ only: ['campaign'] }); }, }); setConfirmAction(prev => ({ ...prev, open: false })); }, }); }; const handleSaveAsTemplate = async () => { if (!templateData.name.trim()) { setTemplateError('Template name is required'); return; } setIsSavingTemplate(true); setTemplateError(''); try { await axios.post('/campaign-templates/from-campaign', { campaign_id: campaign.id, name: templateData.name, description: templateData.description, category: templateData.category, }); setShowTemplateDialog(false); setTemplateData({ name: '', description: '', category: 'general' }); // Show success message alert('Template created successfully!'); } catch { setTemplateError('Failed to create template'); } finally { setIsSavingTemplate(false); } }; const getProgress = () => { const total = campaign.total_contacts || campaign.campaign_contacts_count || 0; if (total === 0) return 0; return Math.round((campaign.total_called / total) * 100); }; const getAnswerRate = () => { if (campaign.total_called === 0) return 0; return Math.round((campaign.total_answered / campaign.total_called) * 100); }; const formatDuration = (seconds: number | null) => { if (!seconds) return '0s'; const mins = Math.floor(seconds / 60); const secs = seconds % 60; return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Campaigns', href: '/campaigns', }, { title: campaign.name, href: `/campaigns/${campaign.id}`, }, ]; return (
{/* Header */}

{campaign.name}

{statusConfig[campaign.status].label}

{campaign.type.replace('_', ' ')} Campaign

{campaign.status === 'running' && ( )} {/* Save as Template: Available for all campaigns */} Save as Template Create a reusable template from this campaign configuration.
setTemplateData({ ...templateData, name: e.target.value })} placeholder="e.g., Customer Follow-up Template" />