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, router, Head } from '@inertiajs/react'; import { ArrowLeft, Edit, Mail, Calendar, Shield, Phone, Target, UserCheck, Clock } from 'lucide-react'; import type { User } from '@/types'; interface Props { agent: User; stats: { campaigns_executed: number; calls_made: number; total_call_duration: number; contacts_reached: number; }; recentCalls: Array<{ id: number; status: string; duration: number; created_at: string; campaign?: { id: number; name: string; }; contact?: { id: number; phone_number: string; first_name: string | null; last_name: string | null; }; }>; } export default function ShowAgent({ agent, stats, recentCalls }: Props) { const getStatusBadge = (status?: string) => { switch (status) { case 'active': return Active; case 'inactive': return Inactive; case 'suspended': return Suspended; default: return Unknown; } }; const getCallStatusBadge = (status: string) => { switch (status) { case 'completed': case 'answered': return Completed; case 'no-answer': return No Answer; case 'busy': return Busy; case 'failed': return Failed; default: return {status}; } }; const formatDuration = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; }; return (
{/* Header */}
{agent.name.charAt(0).toUpperCase()}

{agent.name}

{agent.email}

{/* Stats Grid */}
Campaigns
{stats.campaigns_executed}

Campaigns executed

Calls Made
{stats.calls_made}

Total calls placed

Call Duration
{formatDuration(stats.total_call_duration)}

Total talk time

Contacts Reached
{stats.contacts_reached}

Successfully reached

{/* Agent Details */} Agent Details Basic information about this agent

Email

{agent.email}

Status

{getStatusBadge(agent.status)}
{agent.parent && (

Managed By

{agent.parent.name}
)}

Last Login

{agent.last_login_at ? new Date(agent.last_login_at).toLocaleString() : 'Never' }

Created

{new Date(agent.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}

{/* Permissions */} Permissions Assigned permissions for this agent {agent.roles?.[0]?.permissions && agent.roles[0].permissions.length > 0 ? (
{Object.entries( agent.roles[0].permissions.reduce((acc, perm) => { if (!acc[perm.module]) acc[perm.module] = []; acc[perm.module]!.push(perm); return acc; }, {} as Record) ).map(([module, permissions]) => (

{module}

{permissions?.map((permission) => ( {permission.name} ))}
))}
) : (

No permissions assigned

)}
{/* Recent Calls */} {recentCalls && recentCalls.length > 0 && ( Recent Activity Last {recentCalls.length} calls made by {agent.name}
{recentCalls.map((call) => (

{call.contact?.first_name && call.contact?.last_name ? `${call.contact.first_name} ${call.contact.last_name}` : call.contact?.phone_number || 'Unknown'}

{call.campaign?.name || 'No Campaign'} • {formatDuration(call.duration)}

{getCallStatusBadge(call.status)} {new Date(call.created_at).toLocaleDateString()}
))}
)}
); }