import { Head, Link, router } from '@inertiajs/react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import type { Company, PaginatedData, System, Ticket } from '@/types'; import { useState } from 'react'; 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 dark:bg-slate-900 dark:text-slate-300', medium: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300', high: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300', critical: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300', }; type Props = { tickets: PaginatedData; companies: Company[]; systems: System[]; filters: { company_id?: string; system_id?: string; status?: string; priority?: string; search?: string; }; }; export default function TicketsIndex({ tickets, companies, systems, filters, }: Props) { const [search, setSearch] = useState(filters.search ?? ''); function applyFilter(key: string, value: string | undefined) { const resolved = value === '__all__' ? undefined : value || undefined; router.get( '/tickets', { ...filters, [key]: resolved }, { preserveState: true, replace: true }, ); } function handleSearch(e: React.FormEvent) { e.preventDefault(); applyFilter('search', search); } return ( <>

Tickets

{/* Filters */}
setSearch(e.target.value)} className="w-64" />
{/* Ticket Table */}
{tickets.data.map((ticket) => ( router.visit(`/tickets/${ticket.id}`) } > ))} {tickets.data.length === 0 && ( )}
Ticket # Title Company System Priority Status Assigned To Created
{ticket.ticket_no} {ticket.title} {ticket.company?.name} {ticket.system?.name} {ticket.priority} {ticket.status.replace('_', ' ')} {ticket.assignee?.name ?? '—'} {new Date( ticket.created_at, ).toLocaleDateString()}
No tickets found.
{/* Pagination */} {tickets.last_page > 1 && (

Showing {tickets.from} to {tickets.to} of{' '} {tickets.total} tickets

{tickets.prev_page_url && ( )} {tickets.next_page_url && ( )}
)}
); }