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

app/admin/commission/page.tsx

@@ -6,6 +6,7 @@ import { getDb } from "@/db";
 import { commissionCheckouts, commissionTickets, users } from "@/db/schema";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { CommissionLiveRefresh } from "@/components/commission/live-refresh";
+import { CommissionPushPermission } from "@/components/commission/push-permission";
 import { AdminCommissionAvailabilityControl } from "@/components/commission/admin-availability-control";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -15,7 +16,8 @@ import { getCommissionAvailability } from "@/lib/commission/availability";
 export const instant = false;
 export default async function AdminCommissionPage({ searchParams }: PageProps<"/admin/commission">) {
   await connection();
-  if (!(await getAdminSession())) redirect("/admin/login");
+  const session = await getAdminSession();
+  if (!session) redirect("/admin/login");
   const query = await searchParams;
   const rawPage = Number(query.page ?? 1);
   const page = Number.isInteger(rawPage) && rawPage > 0 ? Math.min(rawPage, 10000) : 1;
@@ -25,9 +27,12 @@ export default async function AdminCommissionPage({ searchParams }: PageProps<"/
     .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" />
+  return <div className="min-h-svh"><AdminHeader /><CommissionLiveRefresh endpoint="/api/commission/events?scope=admin" userId={session.user.id} />
     <main className="mx-auto flex max-w-5xl flex-col gap-5 p-4 py-10 sm:p-8">
-      <h1 className="font-heading text-3xl font-semibold">Commission tickets</h1>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="font-heading text-3xl font-semibold">Commission tickets</h1>
+        <CommissionPushPermission scope="admin" />
+      </div>
       <AdminCommissionAvailabilityControl key={`${availability.isOpen}:${availability.closureMessage}`}
         {...availability} />
       {tickets.length === 0 && <p>ยังไม่มี Ticket</p>}