admin roadmap filter & search, user management, reopen rejected, system health

features/organizer/components/review-card.tsx

@@ -2,7 +2,10 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { reviewVerificationAction } from "@/features/organizer/actions";
+import {
+  reopenVerificationAction,
+  reviewVerificationAction,
+} from "@/features/organizer/actions";
 
 type Verification = {
   id: string;
@@ -33,7 +36,9 @@ function formatDate(d: Date): string {
 export function ReviewCard({ verification }: { verification: Verification }) {
   const router = useRouter();
   const [showReject, setShowReject] = useState(false);
+  const [showReopen, setShowReopen] = useState(false);
   const [rejectionReason, setRejectionReason] = useState("");
+  const [reopenNote, setReopenNote] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -55,6 +60,20 @@ export function ReviewCard({ verification }: { verification: Verification }) {
     router.refresh();
   }
 
+  async function reopen() {
+    setError("");
+    setLoading(true);
+    const result = await reopenVerificationAction(verification.id, reopenNote);
+    setLoading(false);
+    if ("error" in result && result.error) {
+      setError(result.error);
+      return;
+    }
+    setShowReopen(false);
+    setReopenNote("");
+    router.refresh();
+  }
+
   return (
     <article className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
       <header className="mb-4 flex flex-wrap items-start justify-between gap-3 border-b border-neutral-100 pb-4">
@@ -110,6 +129,62 @@ export function ReviewCard({ verification }: { verification: Verification }) {
         </p>
       )}
 
+      {verification.status === "REJECTED" && (
+        <div className="mt-5 border-t border-neutral-100 pt-4">
+          {error && (
+            <div className="mb-3 rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600">
+              {error}
+            </div>
+          )}
+          {!showReopen ? (
+            <button
+              type="button"
+              onClick={() => setShowReopen(true)}
+              disabled={loading}
+              className="rounded-xl border border-amber-300 bg-white px-4 py-2 text-sm font-bold text-amber-700 hover:bg-amber-50 disabled:opacity-50"
+            >
+              🔄 Buka kembali ke PENDING
+            </button>
+          ) : (
+            <div className="space-y-2 rounded-xl border border-amber-200 bg-amber-50/60 p-3">
+              <label className="block text-xs font-semibold text-amber-900">
+                Catatan reopen (min 10 karakter — akan disimpan di rejection
+                reason sebagai history)
+              </label>
+              <textarea
+                value={reopenNote}
+                onChange={(e) => setReopenNote(e.target.value)}
+                rows={2}
+                maxLength={500}
+                placeholder="contoh: Organizer kirim ulang foto KTP jelas via email, siap di-review ulang."
+                className="w-full rounded-xl border border-amber-200 bg-white px-3 py-2 text-sm focus:bg-white focus:border-amber-400"
+              />
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={reopen}
+                  disabled={loading || reopenNote.trim().length < 10}
+                  className="rounded-xl bg-amber-600 px-4 py-2 text-sm font-bold text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {loading ? "Memproses..." : "Konfirmasi Reopen"}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowReopen(false);
+                    setReopenNote("");
+                  }}
+                  disabled={loading}
+                  className="rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-50 disabled:opacity-50"
+                >
+                  Batal
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
       {verification.status === "PENDING" && (
         <div className="mt-5 border-t border-neutral-100 pt-4">
           {error && (