Support org

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

@@ -0,0 +1,97 @@
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { getTranslations, getFormatter } from "next-intl/server";
+import { getSessionUser } from "@/lib/session";
+import {
+  listSupportTicketsForUser,
+  listAllSupportTickets,
+} from "@/lib/db";
+import { Card } from "@/components/ui/card";
+import { formatRelative } from "@/lib/format";
+import { TicketStatusBadge } from "@/components/support/ticket-status-badge";
+import { TicketCategoryLabel } from "@/components/support/ticket-category-label";
+
+/**
+ * /support — ticket list.
+ *
+ * Customers see their own tickets only (per Feature 5: per-user
+ * scope, NOT per-org). Platform admins see the global queue. Same
+ * UI shell, different list source — the rendering logic is
+ * identical because the per-row data is the same shape.
+ *
+ * Sorting: newest activity first (the DB query already orders by
+ * updated_at DESC). Open tickets bubble to the top by virtue of
+ * having recent activity, but we don't sort by status; that's a
+ * filter the admin can add later if the queue grows.
+ */
+export default async function SupportListPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  const t = await getTranslations("support");
+  const f = await getFormatter();
+
+  const tickets = user.isPlatform
+    ? await listAllSupportTickets()
+    : await listSupportTicketsForUser(user.id);
+
+  return (
+    <main className="max-w-5xl mx-auto px-6 py-8">
+      <div className="mb-8 animate-in flex items-end justify-between">
+        <div>
+          <h1 className="font-display text-2xl font-semibold accent-rule">
+            {user.isPlatform ? t("titleAdmin") : t("title")}
+          </h1>
+          <p className="text-sm text-text-secondary mt-3">
+            {user.isPlatform ? t("subtitleAdmin") : t("subtitle")}
+          </p>
+        </div>
+        {!user.isPlatform && (
+          <Link
+            href="/support/new"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors"
+          >
+            {t("newTicket")}
+          </Link>
+        )}
+      </div>
+
+      {tickets.length === 0 ? (
+        <Card className="animate-in animate-in-delay-1">
+          <p className="text-sm text-text-secondary text-center py-6">
+            {user.isPlatform ? t("emptyAdmin") : t("empty")}
+          </p>
+        </Card>
+      ) : (
+        <div className="space-y-2 animate-in animate-in-delay-1">
+          {tickets.map((tk) => (
+            <Link
+              key={tk.id}
+              href={`/support/${tk.id}`}
+              className="block rounded-xl border border-border bg-surface-1 p-4 hover:border-text-secondary transition-colors"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="font-medium text-text-primary truncate">
+                    {tk.title}
+                  </div>
+                  <div className="text-xs text-text-muted mt-1 flex items-center gap-2">
+                    <TicketCategoryLabel category={tk.category} />
+                    <span>·</span>
+                    <span>{formatRelative(tk.updatedAt, f)}</span>
+                    {user.isPlatform && (
+                      <>
+                        <span>·</span>
+                        <span className="font-mono">{tk.contactEmail}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                <TicketStatusBadge status={tk.status} />
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}