style: format code biome
This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
+227
-192
@@ -1,4 +1,10 @@
|
||||
import { AlertCircle, CheckCircle2, Clock, Loader2, Ticket } from "lucide-react";
|
||||
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";
|
||||
@@ -7,215 +13,244 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
open: { label: "Open", icon: AlertCircle, class: "bg-[var(--admin-info-subtle)] text-[var(--admin-info)]" },
|
||||
in_progress: {
|
||||
label: "In Progress",
|
||||
icon: Loader2,
|
||||
class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
|
||||
},
|
||||
waiting: {
|
||||
label: "Waiting",
|
||||
icon: Clock,
|
||||
class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
|
||||
},
|
||||
closed: { label: "Closed", icon: CheckCircle2, class: "bg-muted text-muted-foreground" },
|
||||
open: {
|
||||
label: "Open",
|
||||
icon: AlertCircle,
|
||||
class: "bg-[var(--admin-info-subtle)] text-[var(--admin-info)]",
|
||||
},
|
||||
in_progress: {
|
||||
label: "In Progress",
|
||||
icon: Loader2,
|
||||
class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
|
||||
},
|
||||
waiting: {
|
||||
label: "Waiting",
|
||||
icon: Clock,
|
||||
class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
|
||||
},
|
||||
closed: {
|
||||
label: "Closed",
|
||||
icon: CheckCircle2,
|
||||
class: "bg-muted text-muted-foreground",
|
||||
},
|
||||
} as const;
|
||||
|
||||
const PRIORITY_COLORS = {
|
||||
low: "",
|
||||
normal: "text-[var(--admin-info)]",
|
||||
high: "text-[var(--admin-warning)]",
|
||||
urgent: "text-[var(--admin-error)] font-bold",
|
||||
low: "",
|
||||
normal: "text-[var(--admin-info)]",
|
||||
high: "text-[var(--admin-warning)]",
|
||||
urgent: "text-[var(--admin-error)] font-bold",
|
||||
};
|
||||
|
||||
interface PageProps {
|
||||
searchParams: Promise<{ status?: string; page?: string }>;
|
||||
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 { 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 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 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 [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);
|
||||
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>
|
||||
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-[var(--admin-info)]">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-[var(--admin-warning)]">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-[var(--admin-warning)]">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>
|
||||
{/* 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-[var(--admin-info)]">
|
||||
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-[var(--admin-warning)]">
|
||||
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-[var(--admin-warning)]">
|
||||
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>
|
||||
{/* 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>
|
||||
{/* 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;
|
||||
{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>
|
||||
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>
|
||||
);
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user