Support org

src/app/[locale]/support/[id]/page.tsx

@@ -0,0 +1,103 @@
+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>
+  );
+}