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 { Link, Head } from '@inertiajs/react'; import { ArrowLeft, Download, Phone, Clock, TrendingUp, Users } from 'lucide-react'; import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; interface Campaign { id: number; name: string; type: string; status: string; } interface Analytics { overview: { total_contacts: number; total_calls: number; answered_calls: number; failed_calls: number; in_progress_calls: number; answer_rate: number; completion_rate: number; average_duration: number; total_duration: number; total_duration_formatted: string; }; status_distribution: Array<{ status: string; count: number; label: string; }>; hourly_stats: Array<{ hour: number; label: string; total_calls: number; answered_calls: number; answer_rate: number; avg_duration: number; }>; daily_stats: Array<{ date: string; total_calls: number; answered_calls: number; answer_rate: number; avg_duration: number; }>; performance_metrics: { peak_hour: string | null; peak_hour_calls: number; best_hour: string | null; best_hour_answer_rate: number; avg_retry_attempts: number; max_retry_attempts: number; contacts_with_retries: number; dtmf_responses: Record; }; } interface Props { campaign?: Campaign; analytics?: Analytics; } const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899']; export default function CampaignAnalytics({ campaign = {} as Campaign, analytics = {} as Analytics }: Props) { if (!campaign?.id || !analytics?.overview) { return (

Loading analytics...

 ); } const handleExportCalls = () => { window.location.href = `/analytics/campaigns/${campaign.id}/export/calls`; }; const handleExportContacts = () => { window.location.href = `/analytics/campaigns/${campaign.id}/export/contacts`; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Campaigns', href: '/campaigns', }, { title: campaign.name, href: `/campaigns/${campaign.id}`, }, { title: 'Analytics', href: `/analytics/campaigns/${campaign.id}`, }, ]; return (
{/* Header */}

Campaign Analytics

{campaign.name}

{/* Overview Stats */}
Total Calls
{analytics.overview.total_calls}

{analytics.overview.completion_rate}% completion rate

Answer Rate
{analytics.overview.answer_rate}%

{analytics.overview.answered_calls} calls answered

Avg Duration
{analytics.overview.average_duration}s

Total: {analytics.overview.total_duration_formatted}

Total Contacts
{analytics.overview.total_contacts}

{analytics.overview.failed_calls} failed calls

{/* Status Distribution */} Call Status Distribution Breakdown of call outcomes {analytics.status_distribution.map((entry, index) => ( ))} {/* Performance Metrics */} Performance Metrics Key performance indicators
Peak Hour {analytics.performance_metrics.peak_hour || 'N/A'} ({analytics.performance_metrics.peak_hour_calls} calls)
Best Hour {analytics.performance_metrics.best_hour || 'N/A'} ({analytics.performance_metrics.best_hour_answer_rate}% answer rate)
Avg Retry Attempts {analytics.performance_metrics.avg_retry_attempts}
Contacts with Retries {analytics.performance_metrics.contacts_with_retries}
{Object.keys(analytics.performance_metrics.dtmf_responses).length > 0 && (
DTMF Responses
{Object.entries(analytics.performance_metrics.dtmf_responses).map(([key, value]) => (
Key {key} {value}
))}
)} {/* Hourly Stats */} {analytics.hourly_stats.length > 0 && ( Hourly Call Statistics Calls and answer rates by hour )} {/* Daily Stats */} {analytics.daily_stats.length > 1 && ( Daily Call Trends Performance over time )}
); }