admin roadmap filter & search, user management, reopen rejected, system health
This commit is contained in:
@@ -0,0 +1,349 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { isAdminEmail } from "@/lib/admin";
|
||||
import { userRepo } from "@/server/repositories/user.repo";
|
||||
import { formatRupiah } from "@/lib/utils";
|
||||
import { SuspendUserButton } from "@/features/admin/components/suspend-user-button";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default async function AdminUserDetailPage({ params }: PageProps) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) redirect("/login?callbackUrl=/admin/users");
|
||||
if (!isAdminEmail(session.user.email)) {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl px-4 py-12 text-center">
|
||||
<p className="text-sm text-neutral-600">
|
||||
Halaman ini hanya untuk admin SeTrip.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
const user = await userRepo.findByIdForAdmin(id);
|
||||
if (!user) notFound();
|
||||
|
||||
const isSelf = user.id === session.user.id;
|
||||
const totalSpent = user.bookings
|
||||
.filter((b) => b.status === "PAID" || b.status === "PARTIALLY_REFUNDED")
|
||||
.reduce((sum, b) => sum + b.amount, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">
|
||||
<div className="mb-4 text-xs text-neutral-500">
|
||||
<Link href="/admin/users" className="hover:text-primary-600">
|
||||
← Kembali ke list users
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<header
|
||||
className={`mb-6 rounded-2xl border p-5 shadow-sm sm:p-6 ${
|
||||
user.suspended
|
||||
? "border-red-300 bg-red-50/60"
|
||||
: "border-neutral-200 bg-white"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-wrap items-start gap-4">
|
||||
{user.image ? (
|
||||
<Image
|
||||
src={user.image}
|
||||
alt=""
|
||||
width={64}
|
||||
height={64}
|
||||
className="h-16 w-16 shrink-0 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary-600 text-xl font-bold text-white">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h1 className="text-xl font-bold text-neutral-900 sm:text-2xl">
|
||||
{user.name}
|
||||
</h1>
|
||||
{user.suspended && (
|
||||
<span className="rounded-full bg-red-100 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-red-800">
|
||||
Suspended
|
||||
</span>
|
||||
)}
|
||||
{user.organizerVerification?.status === "APPROVED" && (
|
||||
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-emerald-800">
|
||||
✓ Verified Organizer
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-sm text-neutral-600">{user.email}</p>
|
||||
<p className="mt-0.5 text-[11px] text-neutral-500">
|
||||
User ID:{" "}
|
||||
<code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-neutral-700">
|
||||
{user.id}
|
||||
</code>
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">
|
||||
Bergabung{" "}
|
||||
{user.createdAt.toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
{user.acceptedAt && (
|
||||
<>
|
||||
{" "}
|
||||
· Setuju T&C{" "}
|
||||
{user.acceptedAt.toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="mb-6 grid gap-3 sm:grid-cols-3">
|
||||
<StatCard label="Trip dibuat" value={String(user.trips.length)} />
|
||||
<StatCard label="Booking aktif" value={String(user.bookings.length)} />
|
||||
<StatCard
|
||||
label="Total spent (PAID)"
|
||||
value={formatRupiah(totalSpent)}
|
||||
accent="emerald"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{user.suspended && (
|
||||
<section className="mb-6 rounded-2xl border border-red-300 bg-red-50 p-4 sm:p-5">
|
||||
<h2 className="text-sm font-bold text-red-900">
|
||||
⛔ Akun ditangguhkan
|
||||
</h2>
|
||||
<p className="mt-1 text-xs text-red-900/80">
|
||||
{user.suspendedReason ?? "Tidak ada alasan tercatat."}
|
||||
</p>
|
||||
{user.suspendedBy && (
|
||||
<p className="mt-2 text-[11px] text-red-900/70">
|
||||
Disuspend oleh {user.suspendedBy.email}
|
||||
{user.suspendedAt && (
|
||||
<>
|
||||
{" "}
|
||||
pada{" "}
|
||||
{user.suspendedAt.toLocaleString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
||||
<h2 className="mb-3 text-sm font-bold text-neutral-900">
|
||||
Aksi Admin
|
||||
</h2>
|
||||
{isSelf ? (
|
||||
<p className="text-xs text-neutral-500">
|
||||
Tidak bisa suspend akun sendiri.
|
||||
</p>
|
||||
) : (
|
||||
<SuspendUserButton userId={user.id} isSuspended={user.suspended} />
|
||||
)}
|
||||
</section>
|
||||
|
||||
{user.profile && (
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
||||
<h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
|
||||
Profil Sosial
|
||||
</h2>
|
||||
<dl className="grid gap-3 text-sm sm:grid-cols-2">
|
||||
{user.profile.bio && (
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Bio
|
||||
</dt>
|
||||
<dd className="whitespace-pre-wrap text-neutral-700">
|
||||
{user.profile.bio}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{user.profile.city && (
|
||||
<div>
|
||||
<dt className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Kota
|
||||
</dt>
|
||||
<dd className="text-neutral-700">{user.profile.city}</dd>
|
||||
</div>
|
||||
)}
|
||||
{user.profile.vibe && (
|
||||
<div>
|
||||
<dt className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Vibe
|
||||
</dt>
|
||||
<dd className="text-neutral-700">{user.profile.vibe}</dd>
|
||||
</div>
|
||||
)}
|
||||
{user.profile.interests.length > 0 && (
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Minat
|
||||
</dt>
|
||||
<dd className="mt-0.5 flex flex-wrap gap-1.5">
|
||||
{user.profile.interests.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded-full bg-secondary-50 px-2 py-0.5 text-[11px] font-medium text-secondary-700"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{user.profile.instagram && (
|
||||
<div>
|
||||
<dt className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Instagram
|
||||
</dt>
|
||||
<dd className="text-neutral-700">@{user.profile.instagram}</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{user.organizerVerification && (
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
||||
<h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
|
||||
Verifikasi Organizer
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-700">
|
||||
Status:{" "}
|
||||
<span className="font-semibold">
|
||||
{user.organizerVerification.status}
|
||||
</span>
|
||||
{" · "}
|
||||
<Link
|
||||
href={`/admin/verifications?tab=${user.organizerVerification.status}`}
|
||||
className="text-secondary-700 hover:text-secondary-900"
|
||||
>
|
||||
Buka di /admin/verifications →
|
||||
</Link>
|
||||
</p>
|
||||
{user.organizerVerification.rejectionReason && (
|
||||
<p className="mt-1 text-xs text-red-700">
|
||||
Reason: {user.organizerVerification.rejectionReason}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
||||
<h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
|
||||
Trip yang dibuat ({user.trips.length})
|
||||
</h2>
|
||||
{user.trips.length === 0 ? (
|
||||
<p className="text-xs text-neutral-500">
|
||||
User ini belum pernah membuat trip.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{user.trips.map((t) => (
|
||||
<li key={t.id} className="py-2.5">
|
||||
<Link
|
||||
href={`/admin/trips/${t.id}`}
|
||||
className="flex items-center justify-between gap-3 text-sm hover:text-primary-700"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-semibold text-neutral-800">
|
||||
{t.title}
|
||||
</p>
|
||||
<p className="text-[11px] text-neutral-500">
|
||||
{t.destination} ·{" "}
|
||||
{t.date.toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}{" "}
|
||||
· {t.status}
|
||||
</p>
|
||||
</div>
|
||||
<p className="shrink-0 text-xs font-semibold text-primary-700">
|
||||
{formatRupiah(t.price)}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
|
||||
<h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
|
||||
Booking sebagai peserta ({user.bookings.length})
|
||||
</h2>
|
||||
{user.bookings.length === 0 ? (
|
||||
<p className="text-xs text-neutral-500">Belum ada booking.</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{user.bookings.map((b) => (
|
||||
<li key={b.id} className="py-2.5">
|
||||
<Link
|
||||
href={`/admin/bookings/${b.id}`}
|
||||
className="flex items-center justify-between gap-3 text-sm hover:text-primary-700"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-semibold text-neutral-800">
|
||||
{b.trip.title}
|
||||
</p>
|
||||
<p className="text-[11px] text-neutral-500">
|
||||
{b.trip.date.toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}{" "}
|
||||
· status: <span className="font-semibold">{b.status}</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="shrink-0 text-xs font-semibold text-primary-700">
|
||||
{formatRupiah(b.amount)}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
accent = "primary",
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
accent?: "primary" | "emerald";
|
||||
}) {
|
||||
const cls = accent === "emerald" ? "text-emerald-700" : "text-primary-700";
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-3 sm:p-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
||||
{label}
|
||||
</p>
|
||||
<p className={`mt-0.5 text-lg font-bold sm:text-xl ${cls}`}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user