import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Progress } from '@/components/ui/progress'; import { Link, router, Head } from '@inertiajs/react'; import { Edit, Trash2, Play, Pause, ArrowLeft, Clock, CheckCircle2, XCircle, Activity } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; import { ConfirmationModal } from '@/components/confirmation-modal'; import { useState } from 'react'; interface Sequence { id: number; name: string; description: string; trigger_type: string; is_active: boolean; use_smart_timing: boolean; priority: number; total_enrolled: number; total_completed: number; total_converted: number; conversion_rate: number; steps: Step[]; enrollments: Enrollment[]; } interface Step { id: number; step_number: number; step_name: string; delay_amount: number; delay_unit: string; action_type: string; total_executed: number; total_successful: number; success_rate: number; } interface Enrollment { id: number; status: string; current_step: number; steps_completed: number; next_step_at: string; enrolled_at: string; contact: { id: number; first_name: string; last_name: string; phone_number: string; }; } interface Props { sequence: Sequence; analytics: { total_enrolled: number; active: number; completed: number; converted: number; stopped: number; conversion_rate: number; success_rate: number; avg_completion_time: number; steps_performance: Array<{ step_number: number; step_name: string; action_type: string; total_executed: number; total_successful: number; success_rate: number; }>; }; } const statusColors: Record = { active: 'bg-blue-100 text-blue-800', paused: 'bg-yellow-100 text-yellow-800', completed: 'bg-green-100 text-green-800', stopped: 'bg-red-100 text-red-800', converted: 'bg-purple-100 text-purple-800', }; export default function SequencesShow({ sequence, analytics }: Props) { const [confirmAction, setConfirmAction] = useState<{ open: boolean; title: string; description: string; onConfirm: () => void; variant?: 'default' | 'destructive'; }>({ open: false, title: '', description: '', onConfirm: () => {}, variant: 'default', }); const breadcrumbs: BreadcrumbItem[] = [ { label: 'Dashboard', href: '/dashboard' }, { label: 'Sequences', href: '/sequences' }, { label: sequence.name, href: `/sequences/${sequence.id}` }, ]; const handleToggleActive = () => { const action = sequence.is_active ? 'deactivate' : 'activate'; setConfirmAction({ open: true, title: `${action === 'activate' ? 'Activate' : 'Deactivate'} Sequence`, description: `Are you sure you want to ${action} "${sequence.name}"?`, variant: 'default', onConfirm: () => { router.post(`/api/v1/sequences/${sequence.id}/${action}`, {}, { preserveScroll: true, onSuccess: () => router.reload({ only: ['sequence'] }), }); setConfirmAction({ ...confirmAction, open: false }); }, }); }; const formatDuration = (seconds: number) => { if (!seconds) return 'N/A'; const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); if (hours > 24) { const days = Math.floor(hours / 24); return `${days}d ${hours % 24}h`; } return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`; }; return (

{/* Header */}

{sequence.is_active ? 'Active' : 'Inactive'} {sequence.use_smart_timing && ( AI Timing )}

{sequence.description}

{/* Stats */}

Total Enrolled

{analytics.total_enrolled}

Active

{analytics.active}

Completed

{analytics.completed}

Converted

{analytics.converted}

Conversion Rate

{analytics.conversion_rate.toFixed(1)}%

{/* Tabs */} Steps Enrollments Analytics {/* Steps Tab */} {sequence.steps.map((step, index) => (

Step {step.step_number}: {step.step_name} Wait {step.delay_amount} {step.delay_unit}, then {step.action_type}

{step.action_type}

Executed

{step.total_executed}

Successful

{step.total_successful}

Success Rate

{step.success_rate.toFixed(1)}%

))} {/* Enrollments Tab */} {sequence.enrollments && sequence.enrollments.length > 0 ? ( sequence.enrollments.map((enrollment) => (

{enrollment.contact.first_name} {enrollment.contact.last_name} {enrollment.contact.phone_number}

{enrollment.status}

Current Step

{enrollment.current_step} of {sequence.steps.length}

Steps Completed

{enrollment.steps_completed}

Enrolled At

{new Date(enrollment.enrolled_at).toLocaleDateString()}

Next Step

{enrollment.next_step_at ? new Date(enrollment.next_step_at).toLocaleDateString() : 'N/A'}

)) ) : (

No enrollments yet

Contacts will be automatically enrolled when they match the trigger conditions.

)} {/* Analytics Tab */}

Performance Overview

Success Rate {analytics.success_rate.toFixed(1)}%

Conversion Rate {analytics.conversion_rate.toFixed(1)}%

Avg Completion Time {formatDuration(analytics.avg_completion_time)}

Status Breakdown

Active {analytics.active}

Completed {analytics.completed}

Converted {analytics.converted}

Stopped {analytics.stopped}

Step Performance

{analytics.steps_performance.map((step) => (

Step {step.step_number} {step.step_name} {step.action_type}

{step.success_rate.toFixed(1)}%

{step.total_successful}/{step.total_executed}

))}

setConfirmAction({ ...confirmAction, open })} title={confirmAction.title} description={confirmAction.description} onConfirm={confirmAction.onConfirm} variant={confirmAction.variant} /> ); }