104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { notFound, redirect } from "next/navigation";
|
|
import { getTranslations, getFormatter } from "next-intl/server";
|
|
import { getSessionUser } from "@/lib/session";
|
|
import {
|
|
getSupportTicketById,
|
|
listCommentsForTicket,
|
|
} from "@/lib/db";
|
|
import { Card } from "@/components/ui/card";
|
|
import { BackLink } from "@/components/ui/back-link";
|
|
import { TicketStatusBadge } from "@/components/support/ticket-status-badge";
|
|
import { TicketCategoryLabel } from "@/components/support/ticket-category-label";
|
|
import { TicketThread } from "@/components/support/ticket-thread";
|
|
import { TicketAdminControls } from "@/components/support/ticket-admin-controls";
|
|
import { formatDateTime } from "@/lib/format";
|
|
|
|
/**
|
|
* /support/[id] — single ticket detail.
|
|
*
|
|
* Same UI for customer and admin; admin gets an extra
|
|
* `<TicketAdminControls>` block for changing status/category. The
|
|
* customer side gets a "Close ticket" link if they want to mark it
|
|
* resolved themselves.
|
|
*
|
|
* Authorization mirrors the API: customer sees their own; platform
|
|
* admin sees any. 404 (not 403) when a customer accesses someone
|
|
* else's ticket — don't leak existence.
|
|
*/
|
|
export default async function TicketDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const user = await getSessionUser();
|
|
if (!user) redirect("/login");
|
|
const { id } = await params;
|
|
const ticket = await getSupportTicketById(id);
|
|
if (!ticket) notFound();
|
|
if (!user.isPlatform && ticket.zitadelUserId !== user.id) {
|
|
notFound();
|
|
}
|
|
const comments = await listCommentsForTicket(id);
|
|
const t = await getTranslations("support");
|
|
const f = await getFormatter();
|
|
|
|
return (
|
|
<main className="max-w-3xl mx-auto px-6 py-8">
|
|
<div className="mb-6 animate-in">
|
|
<BackLink href="/support" label={t("title")} />
|
|
<div className="flex items-start justify-between gap-3 mt-2">
|
|
<h1 className="font-display text-2xl font-semibold">
|
|
{ticket.title}
|
|
</h1>
|
|
<TicketStatusBadge status={ticket.status} />
|
|
</div>
|
|
<div className="text-xs text-text-muted mt-2 flex items-center gap-2 flex-wrap">
|
|
<TicketCategoryLabel category={ticket.category} />
|
|
<span>·</span>
|
|
<span>
|
|
{t("openedBy", {
|
|
name: ticket.contactName,
|
|
when: formatDateTime(ticket.createdAt, f),
|
|
})}
|
|
</span>
|
|
<span>·</span>
|
|
<span className="font-mono">#{ticket.id.slice(0, 8)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Original ticket description, rendered as the first message
|
|
in the thread. Visually distinct via the customer-author
|
|
styling (handled inside <TicketThread>). */}
|
|
<div className="space-y-4 animate-in animate-in-delay-1">
|
|
<Card>
|
|
<div className="flex items-center justify-between text-xs text-text-muted mb-2">
|
|
<span className="font-medium text-text-primary">
|
|
{ticket.contactName}
|
|
</span>
|
|
<span>{formatDateTime(ticket.createdAt, f)}</span>
|
|
</div>
|
|
<div className="text-sm text-text-primary whitespace-pre-wrap">
|
|
{ticket.description}
|
|
</div>
|
|
</Card>
|
|
|
|
<TicketThread
|
|
ticketId={ticket.id}
|
|
ticketStatus={ticket.status}
|
|
comments={comments}
|
|
isPlatform={user.isPlatform}
|
|
isOwnTicket={ticket.zitadelUserId === user.id}
|
|
/>
|
|
|
|
{user.isPlatform && (
|
|
<TicketAdminControls
|
|
ticketId={ticket.id}
|
|
currentStatus={ticket.status}
|
|
currentCategory={ticket.category}
|
|
/>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|