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} />