feat : update

app/admin/commission/[id]/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { connection } from "next/server";
 import { AdminHeader } from "@/components/admin/admin-header";
@@ -10,8 +9,7 @@ export default async function AdminCommissionTicketPage({ params }: PageProps<"/
   await connection();
   if (!(await getAdminSession())) notFound();
   const { id } = await params;
-  return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex max-w-6xl flex-col gap-6 p-4 py-10 sm:p-8">
-    <Link href="/admin/commission" className="text-sm underline">กลับไปหน้า Ticket ทั้งหมด</Link>
+  return <div className="flex h-svh flex-col overflow-hidden"><AdminHeader /><main className="mx-auto flex min-h-0 w-full max-w-6xl flex-1 flex-col overflow-hidden p-3 sm:p-4">
     <CommissionTicketDetail id={id} admin />
   </main></div>;
 }

app/admin/commission/page.tsx

@@ -3,12 +3,15 @@ import { desc, eq } from "drizzle-orm";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
 import { getDb } from "@/db";
-import { commissionCheckouts, commissionTickets, users } from "@/db/schema";
+import { commissionCheckouts, commissionTickets } from "@/db/schema";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { CommissionLiveRefresh } from "@/components/commission/live-refresh";
+import { CommissionTicketRename } from "@/components/commission/ticket-rename";
 import { AdminCommissionAvailabilityControl } from "@/components/commission/admin-availability-control";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Pencil } from "lucide-react";
 import { getAdminSession } from "@/lib/auth/server";
 import { getCommissionAvailability } from "@/lib/commission/availability";
 
@@ -20,10 +23,8 @@ export default async function AdminCommissionPage({ searchParams }: PageProps<"/
   const query = await searchParams;
   const rawPage = Number(query.page ?? 1);
   const page = Number.isInteger(rawPage) && rawPage > 0 ? Math.min(rawPage, 10000) : 1;
-  const [tickets, availability] = await Promise.all([getDb().select({ ticket: commissionTickets, amount: commissionCheckouts.amountBaht,
-    customer: users.name }).from(commissionTickets)
+  const [tickets, availability] = await Promise.all([getDb().select({ ticket: commissionTickets, amount: commissionCheckouts.amountBaht }).from(commissionTickets)
     .innerJoin(commissionCheckouts, eq(commissionTickets.checkoutId, commissionCheckouts.id))
-    .innerJoin(users, eq(commissionTickets.userId, users.id))
     .orderBy(desc(commissionTickets.status), desc(commissionTickets.updatedAt), desc(commissionTickets.id))
     .limit(51).offset((page - 1) * 50), getCommissionAvailability()]);
   return <div className="min-h-svh"><AdminHeader /><CommissionLiveRefresh endpoint="/api/commission/events?scope=admin" userId={session.user.id} />
@@ -34,14 +35,26 @@ export default async function AdminCommissionPage({ searchParams }: PageProps<"/
       <AdminCommissionAvailabilityControl key={`${availability.isOpen}:${availability.closureMessage}`}
         {...availability} />
       {tickets.length === 0 && <p>ยังไม่มี Ticket</p>}
-      {tickets.slice(0, 50).map(({ ticket, amount, customer }) => <Link key={ticket.id} href={`/admin/commission/${ticket.id}`}>
-        <Card><CardHeader><CardTitle>{ticket.title || `#${ticket.id.slice(0, 8)}`} - {customer}</CardTitle>
-          <CardAction><Badge variant={ticket.status === "open" ? "outline" : "destructive"}
+      <CommissionTicketRename>
+      {tickets.slice(0, 50).map(({ ticket, amount }) =>
+        <Card key={ticket.id} className="relative"><CardHeader><CardTitle>
+          <Link href={`/admin/commission/${ticket.id}`} className="after:absolute after:inset-0 after:rounded-xl">
+            {ticket.title || `#${ticket.id.slice(0, 8)}`}
+          </Link>
+        </CardTitle>
+          <CardAction className="relative z-10 flex flex-wrap items-center justify-end gap-2">
+            <Badge variant={ticket.status === "open" ? "outline" : "destructive"}
             className={ticket.status === "open" ? "border-success/30 bg-success/10 text-success" : undefined}>
             {ticket.status === "open" ? "เปิดอยู่" : "ปิดแล้ว"}
-          </Badge></CardAction></CardHeader>
+            </Badge>
+            <Button type="button" variant="outline" size="sm" aria-label="เปลี่ยนชื่อ Ticket"
+              data-ticket-rename-id={ticket.id} data-ticket-rename-title={ticket.title ?? ""}>
+              <Pencil data-icon="inline-start" /> เปลี่ยนชื่อ
+            </Button>
+          </CardAction></CardHeader>
           <CardContent>฿{amount} - {ticket.updatedAt.toLocaleString("th-TH")}</CardContent></Card>
-      </Link>)}
+      )}
+      </CommissionTicketRename>
       <nav className="flex gap-4 text-sm" aria-label="Ticket pages">
         {page > 1 && <Link href={`/admin/commission?page=${page - 1}`} className="underline">ก่อนหน้า</Link>}
         {tickets.length > 50 && <Link href={`/admin/commission?page=${page + 1}`} className="underline">ถัดไป</Link>}