openhands
41be6835bf
- Add 11 missing server action files: badges, bulk-users, catalog, catalog-bc, catalog-items, import-badges, import-furni, multi-account-detect, permissions, rooms, soundtracks - Add missing admin navigation links: tickets, sounds, translations, import, radio sub-pages - Add translation keys for all new navigation items
218 lines
7.9 KiB
TypeScript
218 lines
7.9 KiB
TypeScript
import { AlertCircle, CheckCircle2, Clock, Loader2, Ticket } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { redirect } from 'next/navigation'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
|
|
import { prisma } from '@/lib/prisma'
|
|
|
|
const STATUS_CONFIG = {
|
|
open: { label: 'Open', icon: AlertCircle, class: 'bg-blue-500/10 text-blue-500' },
|
|
in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-yellow-500/10 text-yellow-500' },
|
|
waiting: { label: 'Waiting', icon: Clock, class: 'bg-orange-500/10 text-orange-500' },
|
|
closed: { label: 'Closed', icon: CheckCircle2, class: 'bg-muted text-muted-foreground' },
|
|
} as const
|
|
|
|
const PRIORITY_COLORS = {
|
|
low: '',
|
|
normal: 'text-blue-500',
|
|
high: 'text-orange-500',
|
|
urgent: 'text-red-500 font-bold',
|
|
}
|
|
|
|
interface PageProps {
|
|
searchParams: Promise<{ status?: string; page?: string }>
|
|
}
|
|
|
|
export default async function AdminTicketsPage({ searchParams }: PageProps) {
|
|
const { session, permissions } = await getAdminContext()
|
|
if (!canAccess(permissions, PERMS.TICKETS_VIEW, session.user.rank)) {
|
|
redirect('/admin')
|
|
}
|
|
|
|
const sp = await searchParams
|
|
const statusFilter = sp.status || 'active'
|
|
const page = Math.max(1, Number(sp.page) || 1)
|
|
const perPage = 20
|
|
|
|
const where =
|
|
statusFilter === 'active'
|
|
? { status: { not: 'closed' } }
|
|
: statusFilter === 'all'
|
|
? {}
|
|
: { status: statusFilter }
|
|
|
|
const [tickets, total, stats] = await Promise.all([
|
|
prisma.websiteTicket.findMany({
|
|
where,
|
|
orderBy: [{ createdAt: 'desc' }],
|
|
skip: (page - 1) * perPage,
|
|
take: perPage,
|
|
include: {
|
|
creator: { select: { id: true, username: true } },
|
|
assignee: { select: { id: true, username: true } },
|
|
_count: { select: { messages: true } },
|
|
},
|
|
}),
|
|
prisma.websiteTicket.count({ where }),
|
|
Promise.all([
|
|
prisma.websiteTicket.count({ where: { status: 'open' } }),
|
|
prisma.websiteTicket.count({ where: { status: 'in_progress' } }),
|
|
prisma.websiteTicket.count({ where: { status: 'waiting' } }),
|
|
prisma.websiteTicket.count({ where: { status: 'closed' } }),
|
|
]),
|
|
])
|
|
|
|
const [openCount, inProgressCount, waitingCount, closedCount] = stats
|
|
const totalPages = Math.ceil(total / perPage)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Support Tickets</h1>
|
|
<p className="text-muted-foreground">Manage user support requests</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-blue-500">Open</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{openCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-yellow-500">In Progress</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{inProgressCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-orange-500">Waiting</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{waitingCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Closed</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{closedCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Filter tabs */}
|
|
<div className="flex gap-2">
|
|
{[
|
|
{ key: 'active', label: 'Active' },
|
|
{ key: 'open', label: 'Open' },
|
|
{ key: 'in_progress', label: 'In Progress' },
|
|
{ key: 'waiting', label: 'Waiting' },
|
|
{ key: 'closed', label: 'Closed' },
|
|
{ key: 'all', label: 'All' },
|
|
].map(({ key, label }) => (
|
|
<Link key={key} href={`/admin/tickets?status=${key}`}>
|
|
<Badge
|
|
variant={statusFilter === key ? 'default' : 'outline'}
|
|
className="cursor-pointer"
|
|
>
|
|
{label}
|
|
</Badge>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Ticket list */}
|
|
<div className="rounded-lg border">
|
|
<div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
|
|
<span>Ticket</span>
|
|
<span>Status</span>
|
|
<span>Priority</span>
|
|
<span>Assigned</span>
|
|
<span>Date</span>
|
|
</div>
|
|
|
|
{tickets.length === 0 ? (
|
|
<div className="p-8 text-center text-muted-foreground">
|
|
<Ticket className="h-8 w-8 mx-auto mb-2" />
|
|
No tickets found.
|
|
</div>
|
|
) : (
|
|
tickets.map((ticket) => {
|
|
const status =
|
|
STATUS_CONFIG[ticket.status as keyof typeof STATUS_CONFIG] ?? STATUS_CONFIG.open
|
|
const StatusIcon = status.icon
|
|
|
|
return (
|
|
<Link
|
|
key={ticket.id}
|
|
href={`/admin/tickets/${ticket.id}`}
|
|
className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0 hover:pl-4"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground font-mono">#{ticket.id}</span>
|
|
<span className="font-medium truncate">{ticket.subject}</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
by {ticket.creator.username} · {ticket._count.messages} msg ·{' '}
|
|
{ticket.category}
|
|
</div>
|
|
</div>
|
|
<span
|
|
className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${status.class}`}
|
|
>
|
|
<StatusIcon className="h-3 w-3" />
|
|
{status.label}
|
|
</span>
|
|
<span
|
|
className={`text-xs capitalize whitespace-nowrap ${PRIORITY_COLORS[ticket.priority as keyof typeof PRIORITY_COLORS] ?? ''}`}
|
|
>
|
|
{ticket.priority}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
|
{ticket.assignee?.username ?? '—'}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
|
{new Date(ticket.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-2">
|
|
{page > 1 && (
|
|
<Link href={`/admin/tickets?status=${statusFilter}&page=${page - 1}`}>
|
|
<Badge variant="outline" className="cursor-pointer">
|
|
Previous
|
|
</Badge>
|
|
</Link>
|
|
)}
|
|
<span className="text-sm text-muted-foreground">
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
{page < totalPages && (
|
|
<Link href={`/admin/tickets?status=${statusFilter}&page=${page + 1}`}>
|
|
<Badge variant="outline" className="cursor-pointer">
|
|
Next
|
|
</Badge>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|