refund roadmap pr-1 and pr-2

features/trip/actions.ts

@@ -180,3 +180,27 @@ export async function rejectParticipantAction(
     return { error: (err as Error).message };
   }
 }
+
+export async function cancelTripAction(tripId: string) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return { error: "Kamu harus login terlebih dahulu" };
+  }
+
+  try {
+    const result = await tripService.closeTrip(tripId, session.user.id);
+    revalidatePath(`/trips/${tripId}`);
+    revalidatePath("/trips");
+    revalidatePath("/");
+    revalidatePath("/profile");
+    revalidatePath("/admin/refunds");
+    return {
+      success: true as const,
+      refundCount: result.refundsCreated.length,
+      cancelledCount: result.cancelledBookings.length,
+      skippedCount: result.skippedBookings.length,
+    };
+  } catch (err) {
+    return { error: (err as Error).message };
+  }
+}

features/trip/components/cancel-trip-button.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { cancelTripAction } from "@/features/trip/actions";
+
+interface CancelTripButtonProps {
+  tripId: string;
+  /** Jumlah peserta dengan booking PAID — preview impact. */
+  paidParticipantCount: number;
+}
+
+export function CancelTripButton({
+  tripId,
+  paidParticipantCount,
+}: CancelTripButtonProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [confirmText, setConfirmText] = useState("");
+  const [result, setResult] = useState<
+    | { refundCount: number; cancelledCount: number; skippedCount: number }
+    | null
+  >(null);
+
+  async function handleConfirm() {
+    setLoading(true);
+    setError("");
+    const res = await cancelTripAction(tripId);
+    setLoading(false);
+    if ("error" in res) {
+      setError(res.error ?? "Terjadi kesalahan");
+      return;
+    }
+    setResult({
+      refundCount: res.refundCount,
+      cancelledCount: res.cancelledCount,
+      skippedCount: res.skippedCount,
+    });
+    router.refresh();
+  }
+
+  if (result) {
+    return (
+      <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
+        <p className="font-semibold">Trip dibatalkan.</p>
+        <ul className="mt-2 list-inside list-disc space-y-0.5 text-xs">
+          <li>{result.refundCount} refund dibuat (menunggu admin transfer)</li>
+          <li>
+            {result.cancelledCount} booking belum-bayar di-cancel langsung
+          </li>
+          {result.skippedCount > 0 && (
+            <li>
+              {result.skippedCount} booking di-skip (sudah punya refund aktif —
+              admin akan handle manual)
+            </li>
+          )}
+        </ul>
+      </div>
+    );
+  }
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50"
+      >
+        Batalkan Trip
+      </button>
+    );
+  }
+
+  const requireConfirm = paidParticipantCount > 0;
+  const canSubmit = !requireConfirm || confirmText.trim() === "BATAL";
+
+  return (
+    <div className="space-y-3 rounded-2xl border-2 border-red-200 bg-red-50 p-4 text-sm">
+      <div>
+        <p className="font-bold text-red-900">Yakin batalkan trip ini?</p>
+        <p className="mt-1 text-xs text-red-800/80">
+          Aksi ini <span className="font-semibold">tidak bisa di-undo</span>.
+          Trip akan ditandai CLOSED dan semua peserta dibatalkan.
+          {paidParticipantCount > 0 && (
+            <>
+              {" "}Sistem akan otomatis membuat{" "}
+              <span className="font-bold">
+                {paidParticipantCount} refund
+              </span>{" "}
+              full amount untuk peserta yang sudah membayar — admin SeTrip akan
+              memproses transfer.
+            </>
+          )}
+        </p>
+      </div>
+
+      {requireConfirm && (
+        <label className="block">
+          <span className="text-xs font-semibold uppercase tracking-wide text-red-700">
+            Ketik <span className="font-mono">BATAL</span> untuk konfirmasi
+          </span>
+          <input
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder="BATAL"
+            className="mt-1 w-full rounded-xl border border-red-300 bg-white px-3 py-2 font-mono text-sm focus:border-red-500 focus:outline-none"
+          />
+        </label>
+      )}
+
+      {error && (
+        <div className="rounded-lg bg-white px-3 py-2 text-xs font-medium text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          onClick={handleConfirm}
+          disabled={loading || !canSubmit}
+          className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50"
+        >
+          {loading ? "Memproses…" : "Ya, Batalkan Trip"}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            setOpen(false);
+            setConfirmText("");
+            setError("");
+          }}
+          disabled={loading}
+          className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
+        >
+          Batal
+        </button>
+      </div>
+    </div>
+  );
+}

features/trip/components/join-trip-button.tsx

@@ -23,6 +23,9 @@ interface JoinTripButtonProps {
   tripStatus: string;
   /** Tanggal berangkat trip sudah lewat */
   isDeparturePast?: boolean;
+  /** Sembunyikan tombol cancel — dipakai saat booking PAID dan parent
+   *  menampilkan CancelBookingButton (refund flow) di tempat terpisah. */
+  hideCancelButton?: boolean;
 }
 
 export function JoinTripButton({
@@ -36,6 +39,7 @@ export function JoinTripButton({
   isFull,
   tripStatus,
   isDeparturePast,
+  hideCancelButton,
 }: JoinTripButtonProps) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -163,13 +167,15 @@ export function JoinTripButton({
         </Link>
       )}
       {isJoined ? (
-        <button
-          onClick={handleCancel}
-          disabled={loading}
-          className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
-        >
-          {loading ? "Memproses..." : "Batal Ikut"}
-        </button>
+        hideCancelButton ? null : (
+          <button
+            onClick={handleCancel}
+            disabled={loading}
+            className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
+          >
+            {loading ? "Memproses..." : "Batal Ikut"}
+          </button>
+        )
       ) : (
         <button
           onClick={handleJoin}