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 { Link, router, Head } from '@inertiajs/react'; import { Plus, Play, Pause, Edit, Trash2, Eye, Activity, Users, TrendingUp } from 'lucide-react'; import { PageHelp } from '@/components/page-help'; import { ConfirmationModal } from '@/components/confirmation-modal'; import { useState } from 'react'; import { type BreadcrumbItem } from '@/types'; interface Sequence { id: number; name: string; description: string; trigger_type: 'no_answer' | 'interested' | 'callback_requested' | 'not_interested' | 'manual' | 'completed'; is_active: boolean; use_smart_timing: boolean; priority: number; total_enrolled: number; total_completed: number; total_converted: number; conversion_rate: number; steps_count: number; enrollments_count: number; created_at: string; } interface Props { sequences: { data: Sequence[]; meta: { current_page: number; total: number; per_page: number; }; }; stats: { total: number; enrolled: number; converted: number; avg_conversion_rate: number; }; } const triggerConfig: Record = { no_answer: { label: 'No Answer', color: 'bg-yellow-100 text-yellow-800' }, interested: { label: 'Interested', color: 'bg-green-100 text-green-800' }, callback_requested: { label: 'Callback Requested', color: 'bg-blue-100 text-blue-800' }, not_interested: { label: 'Not Interested', color: 'bg-red-100 text-red-800' }, manual: { label: 'Manual', color: 'bg-purple-100 text-purple-800' }, completed: { label: 'Completed', color: 'bg-gray-100 text-gray-800' }, }; export default function SequencesIndex({ sequences, stats }: 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[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Sequences', href: '/sequences' }, ]; const handleToggleActive = async (sequence: Sequence) => { 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}"? ${ action === 'activate' ? 'New contacts matching the trigger will be automatically enrolled.' : 'No new contacts will be enrolled, but active enrollments will continue.' }`, variant: 'default', onConfirm: () => { router.post(`/api/v1/sequences/${sequence.id}/${action}`, {}, { preserveScroll: true, onSuccess: () => router.reload({ only: ['sequences'] }), }); setConfirmAction({ ...confirmAction, open: false }); }, }); }; const handleDelete = (sequence: Sequence) => { setConfirmAction({ open: true, title: 'Delete Sequence', description: `Are you sure you want to delete "${sequence.name}"? This action cannot be undone.`, variant: 'destructive', onConfirm: () => { router.delete(`/api/v1/sequences/${sequence.id}`, { preserveScroll: true, onSuccess: () => router.reload({ only: ['sequences'] }), }); setConfirmAction({ ...confirmAction, open: false }); }, }); }; return (
{/* Stats Overview */}
Total Sequences
{stats.total}

{sequences.data.filter(s => s.is_active).length} active

Total Enrolled
{stats.enrolled}

Contacts in sequences

 Total Converted
{stats.converted}

Successful outcomes

 Avg Conversion Rate
{stats.avg_conversion_rate}%

Across all sequences
{/* Sequences List */} {sequences.data.length === 0 ? (

No sequences yet

Create your first follow-up sequence to automatically nurture leads based on call outcomes.

) : (
{sequences.data.map((sequence) => (
{sequence.name} {sequence.is_active ? 'Active' : 'Inactive'} {triggerConfig[sequence.trigger_type].label} {sequence.use_smart_timing && ( AI Timing )} Priority: {sequence.priority}
{sequence.description}
Steps
{sequence.steps_count}
Enrolled
{sequence.total_enrolled}
Completed
{sequence.total_completed}
Converted
{sequence.total_converted}
Conversion Rate
{sequence.conversion_rate.toFixed(1)}%
 ))}
)}
setConfirmAction({ ...confirmAction, open })} title={confirmAction.title} description={confirmAction.description} onConfirm={confirmAction.onConfirm} variant={confirmAction.variant} /> ); }