polaris-task-force/src/app/(frontend)/helpdesk/[id]/page.tsx

import config from "@payload-config";
import { headers as nextHeaders } from "next/headers";
import { notFound, redirect } from "next/navigation";
import { getPayload } from "payload";
import type { Ticket } from "@/payload-types";
import { TicketDetail } from "@/components/frontend/helpdesk/TicketDetail";
import hasRoles from "@/utils/access-control/hasRoles";
import { ArrowLeftIcon, LifeBuoyIcon } from "lucide-react";
import Link from "next/link";

export const metadata = {
  title: "Ticket — Polaris Task Force",
};

interface TicketPageProps {
  params: Promise<{ id: string }>;
}

export default async function TicketPage({ params }: TicketPageProps) {
  const { id } = await params;
  const payload = await getPayload({ config });
  const { user } = await payload.auth({
    headers: await nextHeaders(),
    canSetHeaders: false,
  });

  if (!user) {
    redirect("/login");
  }

  const ticket = await payload
    .findByID({
      collection: "tickets",
      id: Number(id),
      depth: 2,
    })
    .catch(() => null);

  if (!ticket) {
    notFound();
  }

  const typedTicket = ticket as unknown as Ticket;
  const isStaff = hasRoles(["admin", "developer"], user);
  const assigneeOptions = isStaff
    ? (
        await payload.find({
          collection: "users",
          sort: "username",
          limit: 100,
          depth: 0,
        })
      ).docs.map((staffUser) => ({
        id: staffUser.id,
        label: staffUser.payloadDisplayName || staffUser.username,
      }))
    : [];

  return (
    <div className="flex flex-col gap-6 p-5">
      <div className="flex flex-col gap-3">
        <Link
          href="/helpdesk"
          className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
        >
          <ArrowLeftIcon className="size-3" />
          Helpdesk
        </Link>
        <div className="flex items-center gap-2">
          <LifeBuoyIcon className="size-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Ticket #{typedTicket.id}</h1>
        </div>
      </div>

      <TicketDetail
        ticket={typedTicket}
        currentUserId={user.id}
        isStaff={isStaff}
        assigneeOptions={assigneeOptions}
      />
    </div>
  );
}