import { Head, Link } from '@inertiajs/react'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { Button } from '@/components/ui/button'; import type { Ticket, TicketComment } from '@/types'; type Props = { ticket: Ticket & { comments: TicketComment[] }; }; const statusLabels: Record = { open: 'Open', in_progress: 'In Progress', pending: 'Pending', resolved: 'Resolved', closed: 'Closed', }; const statusColors: Record = { open: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300', in_progress: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300', pending: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300', resolved: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', closed: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300', }; const priorityColors: Record = { low: 'bg-slate-100 text-slate-800', medium: 'bg-blue-100 text-blue-800', high: 'bg-orange-100 text-orange-800', critical: 'bg-red-100 text-red-800', }; export default function TicketStatus({ ticket }: Props) { return ( <>
Support Center
{/* Ticket Header */}

{ticket.ticket_no}

{statusLabels[ticket.status] ?? ticket.status} {ticket.priority}

{ticket.title}

{/* Ticket Details */} Ticket Details

Company

{ticket.company?.name ?? '—'}

System

{ticket.system?.name ?? '—'}

Category

{ticket.category?.name ?? '—'}

Submitted

{new Date( ticket.created_at, ).toLocaleDateString()}

Description

{ticket.description}

{ticket.resolved_at && ( <>

Resolved on{' '} {new Date( ticket.resolved_at, ).toLocaleString()}

)} {/* Public Comments */} {ticket.comments && ticket.comments.length > 0 && ( Updates
{ticket.comments.map((comment) => (
{comment.user?.name ?? 'Support Agent'} {new Date( comment.created_at, ).toLocaleString()}

{comment.body}

))}
)} {ticket.comments?.length === 0 && ( No updates yet. Our team is working on your ticket. )}
); }