feat(commission) : add push notifications and unread ticket titles

app/commission/tickets/page.tsx

@@ -5,6 +5,7 @@ import { connection } from "next/server";
 import { getDb } from "@/db";
 import { commissionCheckouts, commissionTickets } from "@/db/schema";
 import { CommissionLiveRefresh } from "@/components/commission/live-refresh";
+import { CommissionPushPermission } from "@/components/commission/push-permission";
 import { CommissionSignOut } from "@/components/commission/sign-out";
 import { SiteHeader } from "@/components/public/site-header";
 import { Badge } from "@/components/ui/badge";
@@ -28,13 +29,14 @@ export default async function CommissionTicketsPage() {
         gt(commissionCheckouts.createdAt, new Date(checkoutNow() - CHECKOUT_DURATION_MS))))
       .orderBy(desc(commissionCheckouts.createdAt)).limit(20),
   ]);
-  return <div className="min-h-svh"><SiteHeader /><CommissionLiveRefresh endpoint="/api/commission/events" />
+  return <div className="min-h-svh"><SiteHeader /><CommissionLiveRefresh endpoint="/api/commission/events" userId={session.user.id} />
     <main className="mx-auto flex max-w-4xl flex-col gap-5 p-4 py-10 sm:p-8">
       <div className="flex items-center justify-between gap-3">
         <h1 className="font-heading text-3xl font-semibold">Ticket ของฉัน</h1>
         <CommissionSignOut />
       </div>
       <Link href="/commission" className="text-sm underline">สร้างคำขอเพิ่ม</Link>
+      <CommissionPushPermission scope="customer" />
       {pending.length > 0 && <h2 className="text-xl font-semibold">รอชำระเงิน</h2>}
       {pending.map((checkout) => <Link key={checkout.id} href={`/commission/pay/${checkout.id}`}>
         <Card><CardHeader><CardTitle>รอชำระเงิน - ฿{checkout.amount}</CardTitle></CardHeader>