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, Users, Phone, Target, UserCheck } from 'lucide-react'; import type { User } from '@/types'; interface Props { user: User; stats: { campaigns_count: number; contacts_count: number; calls_count: number; agents_count: number; }; } export default function ShowUser({ user, stats }: Props) { const getStatusBadge = (status?: string) => { switch (status) { case 'active': return Active; case 'inactive': return Inactive; case 'suspended': return Suspended; default: return Unknown; } }; const getRoleBadge = () => { const role = user.roles?.[0]; if (!role) return No Role; const colors: Record = { admin: 'bg-purple-500', customer: 'bg-blue-500', agent: 'bg-gray-500', }; return {role.name}; }; return (
{/* Header */}
{user.name.charAt(0).toUpperCase()}

{user.name}

{user.email}

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

Total campaigns created

Contacts
{stats.contacts_count}

Total contacts managed

Calls
{stats.calls_count}

Total calls made

Agents
{stats.agents_count}

Agents under this user

{/* User Details */} User Details Basic information about this user

Email

{user.email}

Role

{getRoleBadge()}

Status

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

Parent User

{user.parent.name}
)}

Last Login

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

Member Since

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

{/* Permissions */} Permissions Assigned permissions via role {user.roles?.[0]?.permissions && user.roles[0].permissions.length > 0 ? (
{Object.entries( user.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

)}
{/* Agents List (if user has agents) */} {user.agents && user.agents.length > 0 && ( Agents Users managed by {user.name}
{user.agents.map((agent) => (
{agent.name.charAt(0).toUpperCase()}

{agent.name}

{agent.email}

{agent.roles?.[0]?.name || 'No Role'} ))}
)}
); }