admin roadmap done, reupload request, submission history, manual override

2026-05-18 20:25:21 +07:00
parent b844ebdfac
commit bc4973a594
20 changed files with 1254 additions and 121 deletions
@@ -7,6 +7,7 @@ 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";
+import { ManualVerifyButton } from "@/features/admin/components/manual-verify-button";

 interface PageProps {
  params: Promise<{ id: string }>;
@@ -154,10 +155,18 @@ export default async function AdminUserDetailPage({ params }: PageProps) {
        </h2>
        {isSelf ? (
          <p className="text-xs text-neutral-500">
-            Tidak bisa suspend akun sendiri.
+            Tidak bisa suspend / modifikasi akun sendiri.
          </p>
        ) : (
-          <SuspendUserButton userId={user.id} isSuspended={user.suspended} />
+          <div className="flex flex-wrap items-start gap-3">
+            <SuspendUserButton userId={user.id} isSuspended={user.suspended} />
+            {!user.organizerVerification && (
+              <ManualVerifyButton
+                userId={user.id}
+                defaultBankAccountName={user.name}
+              />
+            )}
+          </div>
        )}
      </section>

@@ -44,14 +44,22 @@ export default async function AdminUsersPage({ searchParams }: PageProps) {

  return (
    <div className="mx-auto max-w-5xl px-4 py-8 sm:py-12">
-      <header className="mb-6">
-        <h1 className="text-2xl font-bold text-neutral-900 sm:text-3xl">
-          User Management
-        </h1>
-        <p className="mt-1 text-sm text-neutral-500">
-          Cari user, lihat history booking & trip, dan suspend akun yang
-          melakukan abuse (scam, harassment, TOS violation).
-        </p>
+      <header className="mb-6 flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold text-neutral-900 sm:text-3xl">
+            User Management
+          </h1>
+          <p className="mt-1 text-sm text-neutral-500">
+            Cari user, lihat history booking & trip, dan suspend akun yang
+            melakukan abuse (scam, harassment, TOS violation).
+          </p>
+        </div>
+        <Link
+          href="/admin/users/stats"
+          className="rounded-xl border border-neutral-200 bg-white px-3 py-1.5 text-xs font-semibold text-neutral-700 hover:bg-neutral-50"
+        >
+          📊 Stats
+        </Link>
      </header>

      <form method="get" className="mb-4 flex gap-2">
@@ -0,0 +1,202 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { isAdminEmail } from "@/lib/admin";
+import { prisma } from "@/lib/prisma";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+interface WeeklyBucket {
+  weekStart: Date;
+  label: string;
+  count: number;
+}
+
+function thirtyDaysAgoDate(): Date {
+  return new Date(Date.now() - 30 * DAY_MS);
+}
+
+async function getSignupsPerWeek(weeks = 8): Promise<WeeklyBucket[]> {
+  const now = new Date();
+  const startMs = now.getTime() - weeks * 7 * DAY_MS;
+  const startDate = new Date(startMs);
+
+  const users = await prisma.user.findMany({
+    where: { createdAt: { gte: startDate } },
+    select: { createdAt: true },
+  });
+
+  // Bucketize per week (Senin sebagai start, supaya konsisten dengan kalender Indonesia).
+  const buckets: WeeklyBucket[] = [];
+  for (let i = weeks - 1; i >= 0; i--) {
+    const bucketStart = new Date(now.getTime() - (i + 1) * 7 * DAY_MS);
+    bucketStart.setUTCHours(0, 0, 0, 0);
+    const bucketEnd = new Date(bucketStart.getTime() + 7 * DAY_MS);
+    const count = users.filter(
+      (u) => u.createdAt >= bucketStart && u.createdAt < bucketEnd
+    ).length;
+    buckets.push({
+      weekStart: bucketStart,
+      label: bucketStart.toLocaleDateString("id-ID", {
+        day: "2-digit",
+        month: "short",
+      }),
+      count,
+    });
+  }
+  return buckets;
+}
+
+export default async function AdminUserStatsPage() {
+  const session = await getServerSession(authOptions);
+  if (!session?.user) redirect("/login?callbackUrl=/admin/users/stats");
+  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 thirtyDaysAgo = thirtyDaysAgoDate();
+
+  const [
+    totalUsers,
+    suspendedUsers,
+    verifiedOrganizers,
+    activeOrganizers30d,
+    paidParticipants30d,
+    weekly,
+  ] = await Promise.all([
+    prisma.user.count(),
+    prisma.user.count({ where: { suspended: true } }),
+    prisma.organizerVerification.count({ where: { status: "APPROVED" } }),
+    prisma.user.count({
+      where: {
+        trips: { some: { createdAt: { gte: thirtyDaysAgo } } },
+      },
+    }),
+    prisma.user.count({
+      where: {
+        bookings: {
+          some: {
+            status: "PAID",
+            createdAt: { gte: thirtyDaysAgo },
+          },
+        },
+      },
+    }),
+    getSignupsPerWeek(8),
+  ]);
+
+  const maxWeeklyCount = Math.max(1, ...weekly.map((w) => w.count));
+
+  return (
+    <div className="mx-auto max-w-5xl 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">
+        <h1 className="text-2xl font-bold text-neutral-900 sm:text-3xl">
+          User Analytics
+        </h1>
+        <p className="mt-1 text-sm text-neutral-500">
+          Snapshot pertumbuhan user. Real-time read langsung dari DB — tidak
+          ada cache, refresh halaman untuk angka terbaru.
+        </p>
+      </header>
+
+      <section className="mb-8 grid gap-3 sm:grid-cols-3">
+        <StatCard label="Total Users" value={totalUsers} />
+        <StatCard
+          label="Suspended"
+          value={suspendedUsers}
+          accent="red"
+        />
+        <StatCard
+          label="Verified Organizers"
+          value={verifiedOrganizers}
+          accent="emerald"
+        />
+        <StatCard
+          label="Organizer Aktif (30 hari)"
+          value={activeOrganizers30d}
+          accent="secondary"
+          sub="Bikin trip baru"
+        />
+        <StatCard
+          label="Peserta Aktif (30 hari)"
+          value={paidParticipants30d}
+          accent="primary"
+          sub="Booking PAID"
+        />
+      </section>
+
+      <section className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-6">
+        <h2 className="mb-1 text-sm font-bold text-neutral-900">
+          Signup per Minggu (8 minggu terakhir)
+        </h2>
+        <p className="mb-4 text-xs text-neutral-500">
+          Tiap bar = 1 minggu (mulai hari ini mundur). Angka di atas bar = total
+          signup minggu itu.
+        </p>
+        <div className="flex h-48 items-end gap-2">
+          {weekly.map((w) => {
+            const heightPct = (w.count / maxWeeklyCount) * 100;
+            return (
+              <div
+                key={w.weekStart.toISOString()}
+                className="flex flex-1 flex-col items-center gap-1"
+              >
+                <span className="text-[10px] font-semibold text-neutral-700">
+                  {w.count}
+                </span>
+                <div
+                  className="w-full rounded-t-md bg-primary-500/80"
+                  style={{ height: `${Math.max(heightPct, 2)}%` }}
+                  title={`${w.count} signup minggu ${w.label}`}
+                />
+                <span className="text-[10px] text-neutral-500">{w.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  sub,
+  accent = "neutral",
+}: {
+  label: string;
+  value: number;
+  sub?: string;
+  accent?: "neutral" | "primary" | "secondary" | "emerald" | "red";
+}) {
+  const map = {
+    neutral: "text-neutral-800",
+    primary: "text-primary-700",
+    secondary: "text-secondary-700",
+    emerald: "text-emerald-700",
+    red: "text-red-700",
+  };
+  return (
+    <div className="rounded-xl border border-neutral-200 bg-white p-4 shadow-sm">
+      <p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
+        {label}
+      </p>
+      <p className={`mt-0.5 text-2xl font-bold ${map[accent]}`}>{value}</p>
+      {sub && <p className="text-[11px] text-neutral-500">{sub}</p>}
+    </div>
+  );
+}