495 lines
15 KiB
TypeScript
495 lines
15 KiB
TypeScript
import Link from "next/link";
|
|
import { notFound, redirect } from "next/navigation";
|
|
import { getServerSession } from "next-auth";
|
|
import { ArrowLeft, CalendarDays, CircleAlert, MapPin } from "lucide-react";
|
|
import { authOptions } from "@/lib/auth";
|
|
import { isAdminEmail } from "@/lib/admin";
|
|
import { bookingRepo } from "@/server/repositories/booking.repo";
|
|
import { formatRupiah } from "@/lib/utils";
|
|
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
|
|
import { AdminReconcileButton } from "@/features/booking/components/admin-reconcile-button";
|
|
import { RawCallbackViewer } from "@/features/booking/components/raw-callback-viewer";
|
|
|
|
interface PageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function AdminBookingDetailPage({ params }: PageProps) {
|
|
const session = await getServerSession(authOptions);
|
|
if (!session?.user) {
|
|
redirect("/login?callbackUrl=/admin/bookings");
|
|
}
|
|
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 booking = await bookingRepo.findByIdForAdmin(id);
|
|
if (!booking) notFound();
|
|
|
|
// Build chronological timeline lintas Payment + Refund + Payout.
|
|
type TimelineEvent =
|
|
| {
|
|
kind: "payment";
|
|
at: Date;
|
|
payment: (typeof booking.payments)[number];
|
|
}
|
|
| {
|
|
kind: "refund";
|
|
at: Date;
|
|
refund: (typeof booking.refunds)[number];
|
|
}
|
|
| {
|
|
kind: "payout";
|
|
at: Date;
|
|
payout: NonNullable<typeof booking.payout>;
|
|
};
|
|
|
|
const timeline: TimelineEvent[] = [];
|
|
for (const p of booking.payments) {
|
|
timeline.push({ kind: "payment", at: p.createdAt, payment: p });
|
|
}
|
|
for (const r of booking.refunds) {
|
|
timeline.push({ kind: "refund", at: r.createdAt, refund: r });
|
|
}
|
|
if (booking.payout) {
|
|
timeline.push({
|
|
kind: "payout",
|
|
at: booking.payout.createdAt,
|
|
payout: booking.payout,
|
|
});
|
|
}
|
|
timeline.sort((a, b) => a.at.getTime() - b.at.getTime());
|
|
|
|
return (
|
|
<div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">
|
|
<div className="mb-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-500">
|
|
<Link
|
|
href="/admin"
|
|
className="inline-flex items-center gap-1 hover:text-primary-600"
|
|
>
|
|
<ArrowLeft size={14} strokeWidth={2} aria-hidden />
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
href={`/admin/trips/${booking.tripId}`}
|
|
className="hover:text-primary-600"
|
|
>
|
|
Trip terkait
|
|
</Link>
|
|
</div>
|
|
|
|
<header className="mb-6 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
|
|
Booking
|
|
</p>
|
|
<h1 className="mt-0.5 text-xl font-bold text-neutral-900 sm:text-2xl">
|
|
{booking.trip.title}
|
|
</h1>
|
|
<p className="mt-1 flex flex-wrap items-center gap-1 text-sm text-neutral-500">
|
|
<CalendarDays
|
|
size={14}
|
|
strokeWidth={1.75}
|
|
aria-hidden
|
|
className="shrink-0"
|
|
/>
|
|
{formatTripCalendarDateRangeLong(booking.trip.date, booking.trip.endDate)}
|
|
<span aria-hidden>·</span>
|
|
<MapPin
|
|
size={14}
|
|
strokeWidth={1.75}
|
|
aria-hidden
|
|
className="shrink-0"
|
|
/>
|
|
{booking.trip.destination}, {booking.trip.location}
|
|
</p>
|
|
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<FieldRow label="Peserta" value={booking.user.name} sub={booking.user.email} />
|
|
<FieldRow
|
|
label="Organizer"
|
|
value={booking.trip.organizer.name}
|
|
sub={booking.trip.organizer.email}
|
|
/>
|
|
<FieldRow
|
|
label="Nominal booking"
|
|
value={formatRupiah(booking.amount)}
|
|
strong
|
|
/>
|
|
<FieldRow label="Status booking" value={booking.status} badge />
|
|
</div>
|
|
|
|
<div className="mt-4 border-t border-neutral-100 pt-3 text-[11px] text-neutral-500">
|
|
<p>
|
|
Booking ID:{" "}
|
|
<code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-neutral-700">
|
|
{booking.id}
|
|
</code>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-6">
|
|
<h2 className="mb-4 text-sm font-bold text-neutral-900 sm:text-base">
|
|
Timeline Money Flow ({timeline.length} event)
|
|
</h2>
|
|
|
|
{timeline.length === 0 ? (
|
|
<p className="text-xs text-neutral-500">
|
|
Belum ada event payment / refund / payout untuk booking ini.
|
|
</p>
|
|
) : (
|
|
<ol className="space-y-4">
|
|
{timeline.map((ev, idx) => (
|
|
<li key={idx} className="border-l-2 border-neutral-200 pl-4">
|
|
{ev.kind === "payment" && (
|
|
<PaymentEventCard payment={ev.payment} />
|
|
)}
|
|
{ev.kind === "refund" && <RefundEventCard refund={ev.refund} />}
|
|
{ev.kind === "payout" && <PayoutEventCard payout={ev.payout} />}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FieldRow({
|
|
label,
|
|
value,
|
|
sub,
|
|
strong,
|
|
badge,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
sub?: string;
|
|
strong?: boolean;
|
|
badge?: boolean;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
|
{label}
|
|
</p>
|
|
{badge ? (
|
|
<span className="mt-0.5 inline-block rounded-full bg-neutral-200 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-neutral-700">
|
|
{value}
|
|
</span>
|
|
) : (
|
|
<p
|
|
className={`mt-0.5 text-neutral-800 ${
|
|
strong ? "text-base font-bold text-primary-700" : "text-sm font-semibold"
|
|
}`}
|
|
>
|
|
{value}
|
|
</p>
|
|
)}
|
|
{sub && (
|
|
<p className="text-[11px] text-neutral-500">{sub}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EventHeader({
|
|
kind,
|
|
title,
|
|
at,
|
|
}: {
|
|
kind: "payment" | "refund" | "payout";
|
|
title: string;
|
|
at: Date;
|
|
}) {
|
|
const dotCls =
|
|
kind === "payment"
|
|
? "bg-secondary-500"
|
|
: kind === "refund"
|
|
? "bg-amber-500"
|
|
: "bg-emerald-500";
|
|
return (
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<span className={`inline-block h-2 w-2 rounded-full ${dotCls}`} />
|
|
<p className="text-xs font-bold uppercase tracking-wide text-neutral-700">
|
|
{title}
|
|
</p>
|
|
<p className="text-[11px] text-neutral-400">
|
|
{at.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PaymentEventCard({
|
|
payment,
|
|
}: {
|
|
payment: {
|
|
id: string;
|
|
provider: string;
|
|
method: string | null;
|
|
amount: number;
|
|
status: string;
|
|
externalOrderId: string;
|
|
externalTxId: string | null;
|
|
snapToken: string | null;
|
|
expiresAt: Date | null;
|
|
paidAt: Date | null;
|
|
failedAt: Date | null;
|
|
rejectionReason: string | null;
|
|
rawCallback: unknown;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
};
|
|
}) {
|
|
const canReconcile = payment.provider === "MIDTRANS";
|
|
return (
|
|
<div>
|
|
<EventHeader
|
|
kind="payment"
|
|
title={`Payment ${payment.provider}`}
|
|
at={payment.createdAt}
|
|
/>
|
|
<div className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 sm:p-4">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1 space-y-1 text-xs text-neutral-700">
|
|
<p>
|
|
<span className="font-semibold">Order ID:</span>{" "}
|
|
<code className="rounded bg-white px-1.5 py-0.5 font-mono text-[11px]">
|
|
{payment.externalOrderId}
|
|
</code>
|
|
</p>
|
|
{payment.externalTxId && (
|
|
<p>
|
|
<span className="font-semibold">Transaction ID:</span>{" "}
|
|
<code className="rounded bg-white px-1.5 py-0.5 font-mono text-[11px]">
|
|
{payment.externalTxId}
|
|
</code>
|
|
</p>
|
|
)}
|
|
<p>
|
|
<span className="font-semibold">Nominal:</span>{" "}
|
|
{formatRupiah(payment.amount)}
|
|
</p>
|
|
<p>
|
|
<span className="font-semibold">Status:</span>{" "}
|
|
<StatusBadge value={payment.status} />
|
|
{payment.method && (
|
|
<span className="ml-2 text-neutral-500">
|
|
via <span className="font-medium">{payment.method}</span>
|
|
</span>
|
|
)}
|
|
</p>
|
|
{payment.expiresAt && (
|
|
<p className="text-neutral-500">
|
|
Expires:{" "}
|
|
{payment.expiresAt.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
)}
|
|
{payment.paidAt && (
|
|
<p className="text-emerald-700">
|
|
Paid at:{" "}
|
|
{payment.paidAt.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
)}
|
|
{payment.rejectionReason && (
|
|
<p className="flex items-center gap-1 text-red-700">
|
|
<CircleAlert
|
|
size={14}
|
|
strokeWidth={2}
|
|
aria-hidden
|
|
className="shrink-0"
|
|
/>
|
|
{payment.rejectionReason}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{canReconcile && (
|
|
<AdminReconcileButton orderId={payment.externalOrderId} />
|
|
)}
|
|
</div>
|
|
<div className="mt-3 border-t border-neutral-200 pt-3">
|
|
<RawCallbackViewer payload={payment.rawCallback} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RefundEventCard({
|
|
refund,
|
|
}: {
|
|
refund: {
|
|
id: string;
|
|
amount: number;
|
|
reason: string;
|
|
status: string;
|
|
adminNote: string | null;
|
|
reportNote: string;
|
|
createdAt: Date;
|
|
reviewedAt: Date | null;
|
|
succeededAt: Date | null;
|
|
failedAt: Date | null;
|
|
reviewedBy: { id: string; name: string; email: string } | null;
|
|
};
|
|
}) {
|
|
return (
|
|
<div>
|
|
<EventHeader
|
|
kind="refund"
|
|
title={`Refund (${refund.reason})`}
|
|
at={refund.createdAt}
|
|
/>
|
|
<div className="rounded-xl border border-amber-200 bg-amber-50/60 p-3 sm:p-4">
|
|
<div className="space-y-1 text-xs text-neutral-700">
|
|
<p>
|
|
<span className="font-semibold">Nominal:</span>{" "}
|
|
{formatRupiah(refund.amount)}
|
|
</p>
|
|
<p>
|
|
<span className="font-semibold">Status:</span>{" "}
|
|
<StatusBadge value={refund.status} />
|
|
</p>
|
|
{refund.reportNote && (
|
|
<p className="text-neutral-600">
|
|
<span className="font-semibold">Report:</span> {refund.reportNote}
|
|
</p>
|
|
)}
|
|
{refund.adminNote && (
|
|
<p className="text-neutral-600">
|
|
<span className="font-semibold">Admin note:</span>{" "}
|
|
{refund.adminNote}
|
|
</p>
|
|
)}
|
|
{refund.reviewedBy && (
|
|
<p className="text-[11px] text-neutral-500">
|
|
Reviewed by {refund.reviewedBy.email}
|
|
{refund.reviewedAt && (
|
|
<>
|
|
{" "}
|
|
·{" "}
|
|
{refund.reviewedAt.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</>
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PayoutEventCard({
|
|
payout,
|
|
}: {
|
|
payout: {
|
|
id: string;
|
|
amount: number;
|
|
status: string;
|
|
heldUntil: Date;
|
|
releasedAt: Date | null;
|
|
paidAt: Date | null;
|
|
cancelledAt: Date | null;
|
|
adminNote: string | null;
|
|
createdAt: Date;
|
|
processedBy: { id: string; name: string; email: string } | null;
|
|
};
|
|
}) {
|
|
return (
|
|
<div>
|
|
<EventHeader kind="payout" title="Payout ke organizer" at={payout.createdAt} />
|
|
<div className="rounded-xl border border-emerald-200 bg-emerald-50/60 p-3 sm:p-4">
|
|
<div className="space-y-1 text-xs text-neutral-700">
|
|
<p>
|
|
<span className="font-semibold">Nominal:</span>{" "}
|
|
{formatRupiah(payout.amount)}
|
|
</p>
|
|
<p>
|
|
<span className="font-semibold">Status:</span>{" "}
|
|
<StatusBadge value={payout.status} />
|
|
</p>
|
|
<p className="text-neutral-600">
|
|
Held until:{" "}
|
|
{payout.heldUntil.toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
})}
|
|
</p>
|
|
{payout.paidAt && (
|
|
<p className="text-emerald-700">
|
|
Paid at:{" "}
|
|
{payout.paidAt.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
)}
|
|
{payout.adminNote && (
|
|
<p className="text-neutral-600">
|
|
<span className="font-semibold">Admin note:</span>{" "}
|
|
{payout.adminNote}
|
|
</p>
|
|
)}
|
|
{payout.processedBy && (
|
|
<p className="text-[11px] text-neutral-500">
|
|
Processed by {payout.processedBy.email}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusBadge({ value }: { value: string }) {
|
|
const finalStatuses = ["PAID", "SUCCEEDED", "RELEASED"];
|
|
const negativeStatuses = ["FAILED", "EXPIRED", "CANCELLED", "REJECTED"];
|
|
const cls = finalStatuses.includes(value)
|
|
? "bg-emerald-100 text-emerald-800"
|
|
: negativeStatuses.includes(value)
|
|
? "bg-red-100 text-red-800"
|
|
: "bg-amber-100 text-amber-800";
|
|
return (
|
|
<span
|
|
className={`inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${cls}`}
|
|
>
|
|
{value}
|
|
</span>
|
|
);
|
|
}
|