import { Head, Link, router } from '@inertiajs/react'; import { Ticket as TicketIcon } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; type Ticket = { id: string; subject: string; status: 'open' | 'pending' | 'resolved' | 'closed'; priority: 'low' | 'normal' | 'high' | 'urgent'; assignee: string | null; conversation_id: string | null; created_at: string | null; resolved_at: string | null; }; type Props = { tickets: Ticket[]; filter: { status: string }; counts: { open: number; pending: number; resolved: number }; }; const STATUS_FILTERS: Array<{ key: string; label: string }> = [ { key: 'open', label: 'Open' }, { key: 'pending', label: 'Pending' }, { key: 'resolved', label: 'Resolved' }, { key: 'closed', label: 'Closed' }, { key: 'all', label: 'All' }, ]; const PRIORITY_BADGE = { urgent: 'bg-rose-100 text-rose-800 border-rose-200', high: 'bg-amber-100 text-amber-800 border-amber-200', normal: 'bg-slate-100 text-slate-700 border-slate-200', low: 'bg-emerald-100 text-emerald-800 border-emerald-200', } as const; export default function TicketsIndex({ tickets, filter, counts }: Props) { const { t } = useT(); const setStatus = (status: string) => { router.get('/app/tickets', { status }, { preserveScroll: true }); }; return (

{t('Tickets')}

{t( 'Durable support items. Created by the AI when a visitor needs human follow-up, or by your team directly.', )}

{t(':n open', { n: counts.open.toLocaleString() })} {t(':n pending', { n: counts.pending.toLocaleString(), })} {t(':n resolved', { n: counts.resolved.toLocaleString(), })}

{STATUS_FILTERS.map((s) => ( ))}

{tickets.length === 0 ? ( ) : ( tickets.map((tk) => ( )) )}

{t('Subject')}	{t('Priority')}	{t('Status')}	{t('Assignee')}	{t('Created')}
{t('No tickets match this filter yet.')}
{tk.subject}	{tk.priority}	{tk.status}	{tk.assignee ?? '—'}	{tk.created_at ? new Date( tk.created_at, ).toLocaleString() : '—'}

); }