125 lines
3.5 KiB
TypeScript
125 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { ArrowLeft } from "lucide-react";
|
|
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { getMaestroDetail } from "@/lib/maestros";
|
|
import {
|
|
formatDate,
|
|
getAccountTypeLabel,
|
|
getActivateStatusLabel,
|
|
} from "@/lib/utils";
|
|
import { MaestroEditForm } from "./MaestroEditForm";
|
|
import { StudentsSection } from "./StudentsSection";
|
|
import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
|
|
import { UpgradeRequestsSection } from "./UpgradeRequestsSection";
|
|
import { LogsSection } from "./LogsSection";
|
|
|
|
type MaestroDetailPageProps = {
|
|
params: Promise<{
|
|
maestroId: string;
|
|
}>;
|
|
};
|
|
|
|
export default async function MaestroDetailPage({
|
|
params,
|
|
}: MaestroDetailPageProps) {
|
|
const { maestroId } = await params;
|
|
const maestroID = Number(maestroId);
|
|
|
|
if (!Number.isInteger(maestroID) || maestroID <= 0) {
|
|
notFound();
|
|
}
|
|
|
|
const detail = await getMaestroDetail(maestroID);
|
|
|
|
if (!detail) {
|
|
notFound();
|
|
}
|
|
|
|
const { maestro } = detail;
|
|
|
|
return (
|
|
<section className="space-y-5">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<Link
|
|
className={buttonVariants({
|
|
variant: "ghost",
|
|
size: "sm",
|
|
className: "mb-2 -ml-2",
|
|
})}
|
|
href="/maestros"
|
|
>
|
|
<ArrowLeft className="size-4" aria-hidden="true" />
|
|
목록
|
|
</Link>
|
|
<h1 className="text-2xl font-semibold tracking-normal">
|
|
{maestro.name}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
MaestroID {maestro.maestroID} · {maestro.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-4">
|
|
<SummaryCard
|
|
label="상태"
|
|
value={getActivateStatusLabel(maestro.activateStatus)}
|
|
/>
|
|
<SummaryCard
|
|
label="계정 유형"
|
|
value={getAccountTypeLabel(maestro.accountType)}
|
|
/>
|
|
<SummaryCard
|
|
label="학생 수"
|
|
value={detail.counts.players.toLocaleString()}
|
|
/>
|
|
<SummaryCard
|
|
label="사용 가능일"
|
|
value={formatDate(maestro.availableActivateDateTime)}
|
|
/>
|
|
</div>
|
|
|
|
<section className="rounded-lg border bg-background p-5">
|
|
<h2 className="text-base font-semibold">기본 정보</h2>
|
|
<MaestroEditForm
|
|
maestro={detail.maestro}
|
|
playerCount={detail.counts.players}
|
|
/>
|
|
</section>
|
|
|
|
<StudentsSection maestroID={maestroID} />
|
|
|
|
<div className="grid gap-4 xl:grid-cols-2">
|
|
<ExtensionRequestsSection
|
|
accountType={maestro.accountType}
|
|
extensionRequests={detail.extensionRequests}
|
|
maestroID={maestroID}
|
|
totalCount={detail.counts.extensionRequests}
|
|
/>
|
|
|
|
<UpgradeRequestsSection
|
|
accountType={maestro.accountType}
|
|
activateStatus={maestro.activateStatus}
|
|
maestroID={maestroID}
|
|
totalCount={detail.counts.upgradeRequests}
|
|
upgradeRequests={detail.upgradeRequests}
|
|
/>
|
|
</div>
|
|
|
|
<LogsSection maestroID={maestroID} />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function SummaryCard({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<article className="rounded-lg border bg-background p-4">
|
|
<p className="text-xs font-medium text-muted-foreground">{label}</p>
|
|
<p className="mt-2 text-lg font-semibold">{value}</p>
|
|
</article>
|
|
);
|
|
}
|