import { Head, Link, router, usePage } from '@inertiajs/react'; import { Plus, Search, X } from 'lucide-react'; import { useState } from 'react'; import { TicketPriorityBadge } from '@/components/ticket-priority-badge'; import { TicketStatusBadge } from '@/components/ticket-status-badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Pagination } from '@/components/ui/pagination'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem, CategoryMap, PaginatedData, PriorityMap, StatusMap, Ticket, User, } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Tickets', href: '/tickets' }, ]; type Props = { tickets: PaginatedData; filters: { search?: string; status?: string; priority?: string; category?: string; filter?: string; }; categories: CategoryMap; priorities: PriorityMap; statuses: StatusMap; }; export default function TicketIndex({ tickets, filters, categories, priorities, statuses }: Props) { const { auth } = usePage<{ auth: { user: User } }>().props; const [search, setSearch] = useState(filters.search || ''); function applyFilter(key: string, value: string | undefined) { const params: Record = { ...filters }; if (value && value !== 'all') { params[key] = value; } else { delete params[key]; } if (search) params.search = search; router.get('/tickets', params, { preserveState: true, preserveScroll: true }); } function handleSearch(e: React.FormEvent) { e.preventDefault(); applyFilter('search', search || undefined); } function clearFilters() { setSearch(''); const params: Record = {}; if (filters.filter) params.filter = filters.filter; router.get('/tickets', params, { preserveState: true }); } const hasFilters = filters.search || filters.status || filters.priority || filters.category; return (
{/* Header */}

Tickets

{tickets.total} total ticket{tickets.total !== 1 ? 's' : ''}

{auth.user.role !== 'admin' && ( )}
{/* Filters */}
setSearch(e.target.value)} className="pl-9" />
{hasFilters && ( )}
{/* Ticket Table */} Ticket Category Priority Status Requester Division/Dept Assigned Date {auth.user.role !== 'user' && Action} {tickets.data.length === 0 ? ( No tickets found ) : ( tickets.data.map((ticket) => ( router.visit(`/tickets/${ticket.id}`)} >
#{ticket.ticket_number} {ticket.title}
{categories[ticket.category] || ticket.category} e.stopPropagation()}> {auth.user.role !== 'user' ? ( ) : ( )} {ticket.requester?.name} {ticket.requester?.department || —} {ticket.assignee?.name || —} {new Date(ticket.created_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} {auth.user.role !== 'user' && ( e.stopPropagation()}>
{ticket.status === 'resolved' ? ( ) : ticket.status !== 'closed' ? ( ) : ( )}
)} )) )}
); }