66 lines
4.1 KiB
TypeScript
66 lines
4.1 KiB
TypeScript
import Link from "next/link";
|
|
import { desc, eq } from "drizzle-orm";
|
|
import { redirect } from "next/navigation";
|
|
import { connection } from "next/server";
|
|
import { getDb } from "@/db";
|
|
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";
|
|
|
|
export const instant = false;
|
|
export default async function AdminCommissionPage({ searchParams }: PageProps<"/admin/commission">) {
|
|
await connection();
|
|
const session = await getAdminSession();
|
|
if (!session) redirect("/auth/login?next=%2Fadmin");
|
|
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 }).from(commissionTickets)
|
|
.innerJoin(commissionCheckouts, eq(commissionTickets.checkoutId, commissionCheckouts.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} />
|
|
<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} />
|
|
{tickets.length === 0 && <p>ยังไม่มี Ticket</p>}
|
|
<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>
|
|
<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>
|
|
)}
|
|
</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>}
|
|
</nav>
|
|
</main>
|
|
</div>;
|
|
}
|