feat : add monthly

app/admin/commission/income/page.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { and, asc, eq, gte, lt } from "drizzle-orm";
+import { redirect } from "next/navigation";
+import { connection } from "next/server";
+import { AdminHeader } from "@/components/admin/admin-header";
+import { CommissionIncomeCalendar } from "@/components/commission/income-calendar";
+import { getDb } from "@/db";
+import { commissionPayments, commissionTickets, users } from "@/db/schema";
+import { getAdminSession } from "@/lib/auth/server";
+import { commissionIncomeMonth } from "@/lib/commission/income";
+
+export const instant = false;
+
+export default async function CommissionIncomePage({ searchParams }: PageProps<"/admin/commission/income">) {
+  await connection();
+  if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin%2Fcommission%2Fincome");
+  const { month: rawMonth } = await searchParams;
+  const period = commissionIncomeMonth(rawMonth);
+  const rows = await getDb().select({
+    ticketId: commissionTickets.id,
+    title: commissionTickets.title,
+    creatorName: users.name,
+    amountBaht: commissionPayments.amountBaht,
+    transferredAt: commissionPayments.transferredAt,
+  }).from(commissionPayments)
+    .innerJoin(commissionTickets, eq(commissionTickets.id, commissionPayments.ticketId))
+    .innerJoin(users, eq(users.id, commissionTickets.userId))
+    .where(and(gte(commissionPayments.transferredAt, period.from), lt(commissionPayments.transferredAt, period.to)))
+    .orderBy(asc(commissionPayments.transferredAt), asc(commissionPayments.id));
+
+  return <div className="min-h-svh"><AdminHeader />
+    <main className="mx-auto flex max-w-6xl flex-col gap-5 p-4 py-10 sm:p-8">
+      <Link href="/admin/commission" className="w-fit text-sm underline">กลับไป Commission tickets</Link>
+      <header><h1 className="font-heading text-3xl font-semibold">Commission income</h1>
+        <p className="text-muted-foreground">รายได้ประจำเดือนจาก Commision</p></header>
+      <CommissionIncomeCalendar period={{ month: period.month, year: period.year, number: period.number,
+        previous: period.previous, next: period.next, days: period.days, leadingDays: period.leadingDays }} rows={rows} />
+    </main>
+  </div>;
+}

app/admin/commission/page.tsx

@@ -31,6 +31,7 @@ export default async function AdminCommissionPage({ searchParams }: PageProps<"/
     <main className="mx-auto flex max-w-5xl flex-col gap-5 p-4 py-10 sm:p-8">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <h1 className="font-heading text-3xl font-semibold">Commission tickets</h1>
+        <Button variant="outline" nativeButton={false} render={<Link href="/admin/commission/income" />}>ดูรายได้ประจำเดือน</Button>
       </div>
       <AdminCommissionAvailabilityControl key={`${availability.isOpen}:${availability.closureMessage}`}
         {...availability} />

app/admin/create/page.tsx

@@ -12,17 +12,35 @@ import { getActiveCatalog, listGuideCards } from "@/lib/guides/queries";
 export default async function CreateGuidePage() {
   await connection();
   if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
-  const [catalog, guides] = await Promise.all([getActiveCatalog(), listGuideCards()]);
+  const [catalog, guides] = await Promise.all([
+    getActiveCatalog(),
+    listGuideCards(),
+  ]);
   if (!catalog) redirect("/admin?sync=required");
   return (
     <div className="min-h-svh">
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
         <header className="flex items-center gap-4">
-          <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard"><ArrowLeftIcon /></Button>
-          <div><p className="text-sm text-muted-foreground">Catalog ล่าสุดจาก Lunaris</p><h1 className="font-heading text-3xl font-semibold">สร้าง Guide ใหม่</h1></div>
+          <Button
+            variant="ghost"
+            size="icon"
+            render={<Link href="/admin" />}
+            nativeButton={false}
+            aria-label="กลับ Dashboard"
+          >
+            <ArrowLeftIcon />
+          </Button>
+          <div>
+            <h1 className="font-heading text-3xl font-semibold">
+              สร้าง Guide ใหม่
+            </h1>
+          </div>
         </header>
-        <CreateGuideFlow characters={catalog.characters} existingKeys={guides.map((guide) => guide.characterKey)} />
+        <CreateGuideFlow
+          characters={catalog.characters}
+          existingKeys={guides.map((guide) => guide.characterKey)}
+        />
       </main>
     </div>
   );