create public layout and admin and fix escrow and refund
This commit is contained in:
arifal
@@ -0,0 +1,59 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { AdminSidebar } from "@/components/admin/admin-sidebar";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Admin · SeTrip",
|
||||
alternates: { canonical: "/admin" },
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
/**
|
||||
* Layout admin — terpisah penuh dari layout user (navbar/footer publik tidak
|
||||
* dipakai). Sidebar kiri jadi shell global untuk semua /admin/*.
|
||||
*
|
||||
* Auth gate di layout ini berlaku ke seluruh sub-page admin sehingga
|
||||
* sub-page tidak perlu re-check (boleh disederhanakan di iterasi berikutnya).
|
||||
*/
|
||||
export default async function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
redirect("/login?callbackUrl=/admin");
|
||||
}
|
||||
if (!session.user.isAdmin) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-neutral-50 px-4">
|
||||
<div className="max-w-md rounded-2xl border border-neutral-200 bg-white p-8 text-center shadow-sm">
|
||||
<p className="text-2xl">🔒</p>
|
||||
<h1 className="mt-2 text-base font-bold text-neutral-900">
|
||||
Halaman khusus admin
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Akun kamu tidak punya akses ke panel admin SeTrip.
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
className="mt-4 inline-block rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700"
|
||||
>
|
||||
Kembali ke beranda
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-neutral-50 lg:flex-row">
|
||||
<AdminSidebar
|
||||
user={{ name: session.user.name, email: session.user.email }}
|
||||
/>
|
||||
<main className="flex-1 min-w-0">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { organizerRepo } from "@/server/repositories/organizer.repo";
|
||||
import { refundRepo } from "@/server/repositories/refund.repo";
|
||||
import { payoutRepo } from "@/server/repositories/payout.repo";
|
||||
|
||||
const REFUND_REASON_LABEL: Record<string, string> = {
|
||||
USER_CANCELLATION: "Peserta cancel",
|
||||
ORGANIZER_CANCELLED: "Organizer cancel",
|
||||
TRIP_ISSUE: "Masalah trip",
|
||||
ADMIN_ADJUSTMENT: "Penyesuaian admin",
|
||||
DISPUTE_RESOLVED: "Dispute selesai",
|
||||
OTHER: "Lainnya",
|
||||
};
|
||||
|
||||
function formatIDR(n: number) {
|
||||
return `Rp${n.toLocaleString("id-ID")}`;
|
||||
}
|
||||
|
||||
function timeAgo(d: Date) {
|
||||
const diff = Date.now() - new Date(d).getTime();
|
||||
const h = Math.floor(diff / 3600000);
|
||||
if (h < 1) return `${Math.max(1, Math.floor(diff / 60000))} mnt lalu`;
|
||||
if (h < 24) return `${h} jam lalu`;
|
||||
const days = Math.floor(h / 24);
|
||||
return `${days} hari lalu`;
|
||||
}
|
||||
|
||||
export default async function AdminDashboardPage() {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) redirect("/login?callbackUrl=/admin");
|
||||
if (!session.user.isAdmin) {
|
||||
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 [
|
||||
pendingVerif,
|
||||
approvedVerif,
|
||||
rejectedVerif,
|
||||
pendingRefund,
|
||||
approvedRefund,
|
||||
succeededRefund,
|
||||
heldPayout,
|
||||
releasedPayout,
|
||||
paidPayout,
|
||||
recentPendingVerif,
|
||||
recentPendingRefund,
|
||||
recentApprovedRefund,
|
||||
recentReleasedPayout,
|
||||
] = await Promise.all([
|
||||
organizerRepo.countByStatus("PENDING"),
|
||||
organizerRepo.countByStatus("APPROVED"),
|
||||
organizerRepo.countByStatus("REJECTED"),
|
||||
refundRepo.countByStatus("PENDING"),
|
||||
refundRepo.countByStatus("APPROVED"),
|
||||
refundRepo.countByStatus("SUCCEEDED"),
|
||||
payoutRepo.countByStatus("HELD"),
|
||||
payoutRepo.countByStatus("RELEASED"),
|
||||
payoutRepo.countByStatus("PAID"),
|
||||
organizerRepo.listRecent("PENDING", 3),
|
||||
refundRepo.listRecent("PENDING", 3),
|
||||
refundRepo.listRecent("APPROVED", 3),
|
||||
payoutRepo.listRecent("RELEASED", 3),
|
||||
]);
|
||||
|
||||
const stats: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
hint: string;
|
||||
href: string;
|
||||
accent: "amber" | "blue" | "primary";
|
||||
}> = [
|
||||
{
|
||||
label: "Verifikasi menunggu",
|
||||
value: pendingVerif,
|
||||
hint: "KYC organizer perlu ditinjau",
|
||||
href: "/admin/verifications?tab=PENDING",
|
||||
accent: "amber",
|
||||
},
|
||||
{
|
||||
label: "Refund baru",
|
||||
value: pendingRefund,
|
||||
hint: "Perlu disetujui / ditolak",
|
||||
href: "/admin/refunds?tab=PENDING",
|
||||
accent: "amber",
|
||||
},
|
||||
{
|
||||
label: "Refund siap transfer",
|
||||
value: approvedRefund,
|
||||
hint: "Refund APPROVED — transfer ke peserta lalu mark SUCCEEDED",
|
||||
href: "/admin/refunds?tab=APPROVED",
|
||||
accent: "blue",
|
||||
},
|
||||
{
|
||||
label: "Payout siap transfer",
|
||||
value: releasedPayout,
|
||||
hint: "Escrow lepas — transfer ke organizer",
|
||||
href: "/admin/payouts?tab=RELEASED",
|
||||
accent: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
const accentClasses: Record<typeof stats[number]["accent"], string> = {
|
||||
amber: "bg-amber-50 text-amber-900 ring-amber-200",
|
||||
blue: "bg-blue-50 text-blue-900 ring-blue-200",
|
||||
primary: "bg-primary-50 text-primary-900 ring-primary-200",
|
||||
};
|
||||
|
||||
const totalAttention =
|
||||
pendingVerif + pendingRefund + approvedRefund + releasedPayout;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl px-4 py-8 sm:py-12">
|
||||
<header className="mb-8">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-primary-600">
|
||||
Admin
|
||||
</p>
|
||||
<h1 className="mt-1 text-2xl font-bold text-neutral-900 sm:text-3xl">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Halo {session.user.name}.{" "}
|
||||
{totalAttention > 0 ? (
|
||||
<>
|
||||
Ada <strong className="text-neutral-800">{totalAttention}</strong>{" "}
|
||||
hal yang menunggu tindakan kamu.
|
||||
</>
|
||||
) : (
|
||||
<>Tidak ada antrian pending — semua sudah beres ✨</>
|
||||
)}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Stats row */}
|
||||
<section className="mb-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((s) => (
|
||||
<Link
|
||||
key={s.label}
|
||||
href={s.href}
|
||||
className={`group rounded-2xl bg-white p-5 ring-1 transition-shadow hover:shadow-md ${
|
||||
s.value > 0 ? "ring-neutral-200" : "ring-neutral-100"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={`inline-flex rounded-full px-2.5 py-0.5 text-[11px] font-semibold ring-1 ${accentClasses[s.accent]}`}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-400 group-hover:text-primary-600">
|
||||
Buka →
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-3 text-3xl font-bold text-neutral-900">{s.value}</p>
|
||||
<p className="mt-1 text-xs text-neutral-500">{s.hint}</p>
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* Pending Verifikasi */}
|
||||
<section className="mb-8 rounded-2xl border border-neutral-200 bg-white">
|
||||
<div className="flex items-center justify-between border-b border-neutral-100 px-5 py-4">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-neutral-800">
|
||||
Verifikasi Organizer
|
||||
</h2>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{approvedVerif} disetujui · {rejectedVerif} ditolak ·{" "}
|
||||
{pendingVerif} menunggu
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/verifications?tab=PENDING"
|
||||
className="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-700"
|
||||
>
|
||||
Tinjau pending ({pendingVerif})
|
||||
</Link>
|
||||
</div>
|
||||
{recentPendingVerif.length === 0 ? (
|
||||
<p className="px-5 py-6 text-sm text-neutral-500">
|
||||
Tidak ada pengajuan menunggu review.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{recentPendingVerif.map((v) => (
|
||||
<li
|
||||
key={v.id}
|
||||
className="flex items-center justify-between gap-3 px-5 py-3"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-neutral-800">
|
||||
{v.fullName}
|
||||
</p>
|
||||
<p className="truncate text-xs text-neutral-500">
|
||||
{v.user.name} · {v.user.email} · {timeAgo(v.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/verifications?tab=PENDING"
|
||||
className="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50"
|
||||
>
|
||||
Buka
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Refund — Pending & Siap Transfer */}
|
||||
<section className="mb-8 rounded-2xl border border-neutral-200 bg-white">
|
||||
<div className="flex items-center justify-between border-b border-neutral-100 px-5 py-4">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-neutral-800">Refund</h2>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{succeededRefund} selesai · {approvedRefund} siap transfer ·{" "}
|
||||
{pendingRefund} baru
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/refunds?tab=PENDING"
|
||||
className="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-700"
|
||||
>
|
||||
Tinjau refund
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid divide-neutral-100 sm:grid-cols-2 sm:divide-x">
|
||||
<div className="px-5 py-4">
|
||||
<p className="mb-2 text-xs font-semibold uppercase tracking-wide text-amber-700">
|
||||
Pending ({pendingRefund})
|
||||
</p>
|
||||
{recentPendingRefund.length === 0 ? (
|
||||
<p className="text-sm text-neutral-500">
|
||||
Tidak ada refund baru.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{recentPendingRefund.map((r) => (
|
||||
<li key={r.id} className="text-sm">
|
||||
<Link
|
||||
href="/admin/refunds?tab=PENDING"
|
||||
className="block rounded-lg p-2 -m-2 hover:bg-neutral-50"
|
||||
>
|
||||
<p className="font-semibold text-neutral-800">
|
||||
{formatIDR(r.amount)} ·{" "}
|
||||
<span className="font-normal text-neutral-500">
|
||||
{REFUND_REASON_LABEL[r.reason] ?? r.reason}
|
||||
</span>
|
||||
</p>
|
||||
<p className="truncate text-xs text-neutral-500">
|
||||
{r.booking.user.name} · {r.booking.trip.title} ·{" "}
|
||||
{timeAgo(r.createdAt)}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-4">
|
||||
<p className="mb-2 text-xs font-semibold uppercase tracking-wide text-blue-700">
|
||||
Siap transfer ({approvedRefund})
|
||||
</p>
|
||||
{recentApprovedRefund.length === 0 ? (
|
||||
<p className="text-sm text-neutral-500">
|
||||
Tidak ada refund siap transfer.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{recentApprovedRefund.map((r) => (
|
||||
<li key={r.id} className="text-sm">
|
||||
<Link
|
||||
href="/admin/refunds?tab=APPROVED"
|
||||
className="block rounded-lg p-2 -m-2 hover:bg-neutral-50"
|
||||
>
|
||||
<p className="font-semibold text-neutral-800">
|
||||
{formatIDR(r.amount)} ·{" "}
|
||||
<span className="font-normal text-neutral-500">
|
||||
{REFUND_REASON_LABEL[r.reason] ?? r.reason}
|
||||
</span>
|
||||
</p>
|
||||
<p className="truncate text-xs text-neutral-500">
|
||||
{r.booking.user.name} · {r.booking.trip.title} ·{" "}
|
||||
{timeAgo(r.createdAt)}
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Payout — escrow ke organizer */}
|
||||
<section className="mb-8 rounded-2xl border border-neutral-200 bg-white">
|
||||
<div className="flex items-center justify-between border-b border-neutral-100 px-5 py-4">
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-neutral-800">
|
||||
Payout Organizer (Escrow)
|
||||
</h2>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{paidPayout} dibayar · {releasedPayout} siap transfer ·{" "}
|
||||
{heldPayout} ditahan
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/payouts?tab=RELEASED"
|
||||
className="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-700"
|
||||
>
|
||||
Transfer payout ({releasedPayout})
|
||||
</Link>
|
||||
</div>
|
||||
{recentReleasedPayout.length === 0 ? (
|
||||
<p className="px-5 py-6 text-sm text-neutral-500">
|
||||
Tidak ada payout siap transfer.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{recentReleasedPayout.map((p) => (
|
||||
<li
|
||||
key={p.id}
|
||||
className="flex items-center justify-between gap-3 px-5 py-3"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-neutral-800">
|
||||
{formatIDR(p.amount)} · {p.organizer.name}
|
||||
</p>
|
||||
<p className="truncate text-xs text-neutral-500">
|
||||
{p.trip.title} ·{" "}
|
||||
{p.releasedAt
|
||||
? `release ${timeAgo(p.releasedAt)}`
|
||||
: `hold sampai ${new Date(p.heldUntil).toLocaleDateString("id-ID")}`}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/admin/payouts?tab=RELEASED"
|
||||
className="shrink-0 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-50"
|
||||
>
|
||||
Buka
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-dashed border-neutral-300 bg-neutral-50 px-5 py-4 text-xs text-neutral-500">
|
||||
<p className="mb-1">
|
||||
<span className="font-semibold">Refund APPROVED:</span> admin transfer
|
||||
manual ke peserta lalu tandai <span className="font-semibold">SUCCEEDED</span>.
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Payout RELEASED:</span> escrow dilepas
|
||||
karena trip sudah selesai + 3 hari. Admin transfer ke organizer lalu
|
||||
tandai <span className="font-semibold">PAID</span>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Admin · Payout Organizer",
|
||||
description:
|
||||
"Halaman admin untuk meneruskan uang escrow ke rekening organizer setelah trip selesai.",
|
||||
alternates: { canonical: "/admin/payouts" },
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
export default function AdminPayoutsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return children;
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { isAdminEmail } from "@/lib/admin";
|
||||
import { payoutRepo } from "@/server/repositories/payout.repo";
|
||||
import {
|
||||
PayoutReviewCard,
|
||||
type PayoutCardData,
|
||||
} from "@/features/payout/components/payout-review-card";
|
||||
|
||||
type Tab = "RELEASED" | "HELD" | "PAID" | "CANCELLED";
|
||||
|
||||
const TABS: { key: Tab; label: string }[] = [
|
||||
{ key: "RELEASED", label: "Siap transfer" },
|
||||
{ key: "HELD", label: "Ditahan (escrow)" },
|
||||
{ key: "PAID", label: "Selesai" },
|
||||
{ key: "CANCELLED", label: "Dibatalkan" },
|
||||
];
|
||||
|
||||
interface PageProps {
|
||||
searchParams: Promise<{ tab?: string }>;
|
||||
}
|
||||
|
||||
export default async function AdminPayoutsPage({ searchParams }: PageProps) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) redirect("/login?callbackUrl=/admin/payouts");
|
||||
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 params = await searchParams;
|
||||
const tab: Tab = TABS.some((t) => t.key === params.tab)
|
||||
? (params.tab as Tab)
|
||||
: "RELEASED";
|
||||
|
||||
const rows = await payoutRepo.listByStatus(tab);
|
||||
const items: PayoutCardData[] = rows.map((p) => ({
|
||||
id: p.id,
|
||||
amount: p.amount,
|
||||
currency: p.currency,
|
||||
status: p.status,
|
||||
heldUntil: p.heldUntil,
|
||||
releasedAt: p.releasedAt,
|
||||
paidAt: p.paidAt,
|
||||
cancelledAt: p.cancelledAt,
|
||||
bankName: p.bankName,
|
||||
bankAccountNumber: p.bankAccountNumber,
|
||||
bankAccountName: p.bankAccountName,
|
||||
adminNote: p.adminNote,
|
||||
createdAt: p.createdAt,
|
||||
trip: p.trip,
|
||||
organizer: p.organizer,
|
||||
booking: {
|
||||
id: p.booking.id,
|
||||
amount: p.booking.amount,
|
||||
status: p.booking.status,
|
||||
user: p.booking.user,
|
||||
},
|
||||
processedBy: p.processedBy,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">
|
||||
<header className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-neutral-900 sm:text-3xl">
|
||||
Payout Organizer
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Uang peserta ditahan (escrow) sampai trip selesai + 3 hari. Setelah
|
||||
status <strong>Siap transfer</strong>, admin transfer manual ke
|
||||
rekening organizer lalu tandai sudah dibayar.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="mb-6 flex flex-wrap gap-2">
|
||||
{TABS.map((t) => (
|
||||
<a
|
||||
key={t.key}
|
||||
href={`/admin/payouts?tab=${t.key}`}
|
||||
className={`rounded-full px-4 py-1.5 text-sm font-semibold transition-colors ${
|
||||
tab === t.key
|
||||
? "bg-primary-600 text-white"
|
||||
: "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-neutral-300 bg-white p-10 text-center">
|
||||
<p className="text-sm text-neutral-500">Tidak ada payout pada status ini.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((p) => (
|
||||
<PayoutReviewCard key={p.id} payout={p} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user