kyc user and upload partial update encrypt nik and picture

This commit is contained in:
2026-04-27 21:48:24 +07:00
parent b31fe675ae
commit a92b4a8fd9
51 changed files with 5180 additions and 452 deletions
+78
View File
@@ -0,0 +1,78 @@
"use server";
import { getServerSession } from "next-auth";
import { revalidatePath } from "next/cache";
import { authOptions } from "@/lib/auth";
import { isAdminEmail } from "@/lib/admin";
import { organizerService } from "@/server/services/organizer.service";
import { submitVerificationSchema, reviewVerificationSchema } from "./schemas";
export async function submitVerificationAction(formData: FormData) {
const session = await getServerSession(authOptions);
if (!session?.user) {
return { error: "Kamu harus login terlebih dahulu" };
}
const raw = {
fullName: formData.get("fullName") as string,
nik: formData.get("nik") as string,
birthDate: formData.get("birthDate") as string,
address: formData.get("address") as string,
ktpImageUrl: formData.get("ktpImageUrl") as string,
selfieUrl: formData.get("selfieUrl") as string,
bankName: formData.get("bankName") as string,
bankAccountNumber: formData.get("bankAccountNumber") as string,
bankAccountName: formData.get("bankAccountName") as string,
};
const result = submitVerificationSchema.safeParse(raw);
if (!result.success) {
return { error: result.error.issues[0].message };
}
try {
await organizerService.submitVerification(session.user.id, {
...result.data,
birthDate: new Date(result.data.birthDate),
});
revalidatePath("/verify");
revalidatePath("/profile");
revalidatePath("/admin/verifications");
return { success: true };
} catch (err) {
return { error: (err as Error).message };
}
}
export async function reviewVerificationAction(formData: FormData) {
const session = await getServerSession(authOptions);
if (!session?.user || !isAdminEmail(session.user.email)) {
return { error: "Tidak memiliki akses admin" };
}
const raw = {
verificationId: formData.get("verificationId") as string,
decision: formData.get("decision") as string,
rejectionReason: (formData.get("rejectionReason") as string) || undefined,
};
const result = reviewVerificationSchema.safeParse(raw);
if (!result.success) {
return { error: result.error.issues[0].message };
}
try {
await organizerService.reviewVerification({
verificationId: result.data.verificationId,
decision: result.data.decision,
rejectionReason: result.data.rejectionReason,
reviewerId: session.user.id,
});
revalidatePath("/admin/verifications");
revalidatePath("/verify");
revalidatePath("/profile");
return { success: true };
} catch (err) {
return { error: (err as Error).message };
}
}
@@ -0,0 +1,239 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { reviewVerificationAction } from "@/features/organizer/actions";
type Verification = {
id: string;
fullName: string;
nik: string;
birthDate: Date;
address: string;
ktpImageUrl: string;
selfieUrl: string;
bankName: string;
bankAccountNumber: string;
bankAccountName: string;
status: "PENDING" | "APPROVED" | "REJECTED";
rejectionReason: string | null;
reviewedAt: Date | null;
createdAt: Date;
user: { id: string; name: string; email: string };
reviewedBy: { id: string; name: string; email: string } | null;
};
function formatDate(d: Date): string {
return new Date(d).toLocaleString("id-ID", {
day: "2-digit",
month: "short",
year: "numeric",
});
}
export function ReviewCard({ verification }: { verification: Verification }) {
const router = useRouter();
const [showReject, setShowReject] = useState(false);
const [rejectionReason, setRejectionReason] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
async function decide(decision: "APPROVED" | "REJECTED") {
setError("");
setLoading(true);
const fd = new FormData();
fd.set("verificationId", verification.id);
fd.set("decision", decision);
if (decision === "REJECTED") fd.set("rejectionReason", rejectionReason);
const result = await reviewVerificationAction(fd);
setLoading(false);
if (result.error) {
setError(result.error);
return;
}
setShowReject(false);
setRejectionReason("");
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">
<div>
<h3 className="text-base font-bold text-neutral-900">
{verification.user.name}
</h3>
<p className="text-xs text-neutral-500">
{verification.user.email} · diajukan {formatDate(verification.createdAt)}
</p>
</div>
<StatusPill status={verification.status} />
</header>
<div className="grid gap-4 sm:grid-cols-2">
<Field label="Nama Lengkap" value={verification.fullName} />
<Field label="NIK" value={verification.nik} mono />
<Field
label="Tanggal Lahir"
value={formatDate(verification.birthDate)}
/>
<Field
label="Bank"
value={`${verification.bankName} · ${verification.bankAccountNumber}`}
/>
<Field
label="Pemilik Rekening"
value={verification.bankAccountName}
/>
<Field label="Alamat" value={verification.address} fullWidth />
</div>
<div className="mt-5 grid gap-4 sm:grid-cols-2">
<ImagePreview label="Foto KTP" url={verification.ktpImageUrl} />
<ImagePreview label="Selfie + KTP" url={verification.selfieUrl} />
</div>
{verification.status === "REJECTED" && verification.rejectionReason && (
<div className="mt-4 rounded-xl bg-red-50 p-3 text-sm text-red-700">
<span className="font-semibold">Alasan ditolak:</span>{" "}
{verification.rejectionReason}
</div>
)}
{verification.reviewedBy && verification.reviewedAt && (
<p className="mt-4 text-xs text-neutral-500">
Diproses oleh {verification.reviewedBy.name} pada{" "}
{formatDate(verification.reviewedAt)}
</p>
)}
{verification.status === "PENDING" && (
<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>
)}
{!showReject ? (
<div className="flex flex-wrap gap-2">
<button
type="button"
onClick={() => decide("APPROVED")}
disabled={loading}
className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-bold text-white hover:bg-primary-700 disabled:opacity-50"
>
Setujui
</button>
<button
type="button"
onClick={() => setShowReject(true)}
disabled={loading}
className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-bold text-red-600 hover:bg-red-50 disabled:opacity-50"
>
Tolak
</button>
</div>
) : (
<div className="space-y-2">
<textarea
value={rejectionReason}
onChange={(e) => setRejectionReason(e.target.value)}
rows={2}
placeholder="Alasan penolakan (akan dilihat user)"
className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm focus:bg-white"
/>
<div className="flex gap-2">
<button
type="button"
onClick={() => decide("REJECTED")}
disabled={loading || !rejectionReason.trim()}
className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50"
>
Konfirmasi Tolak
</button>
<button
type="button"
onClick={() => {
setShowReject(false);
setRejectionReason("");
}}
className="rounded-xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
>
Batal
</button>
</div>
</div>
)}
</div>
)}
</article>
);
}
function Field({
label,
value,
mono,
fullWidth,
}: {
label: string;
value: string;
mono?: boolean;
fullWidth?: boolean;
}) {
return (
<div className={fullWidth ? "sm:col-span-2" : ""}>
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
{label}
</p>
<p
className={`mt-0.5 text-sm text-neutral-800 ${mono ? "font-mono" : ""}`}
>
{value}
</p>
</div>
);
}
function ImagePreview({ label, url }: { label: string; url: string }) {
return (
<div>
<p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
{label}
</p>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="block overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100"
>
<div className="relative aspect-[4/3] w-full">
<Image
src={url}
alt={label}
fill
unoptimized
className="object-cover"
sizes="(min-width: 640px) 50vw, 100vw"
/>
</div>
</a>
</div>
);
}
function StatusPill({ status }: { status: "PENDING" | "APPROVED" | "REJECTED" }) {
const cfg = {
PENDING: { label: "Pending", cls: "bg-amber-50 text-amber-700 ring-amber-200" },
APPROVED: { label: "Disetujui", cls: "bg-primary-50 text-primary-700 ring-primary-200" },
REJECTED: { label: "Ditolak", cls: "bg-red-50 text-red-700 ring-red-200" },
}[status];
return (
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ${cfg.cls}`}
>
{cfg.label}
</span>
);
}
@@ -0,0 +1,215 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { submitVerificationAction } from "@/features/organizer/actions";
type Initial = {
fullName: string;
nik: string;
birthDate: Date;
address: string;
ktpImageUrl: string;
selfieUrl: string;
bankName: string;
bankAccountNumber: string;
bankAccountName: string;
} | null;
function toYmd(d: Date): string {
const y = d.getUTCFullYear();
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return `${y}-${m}-${day}`;
}
export function VerifyForm({ initial }: { initial: Initial }) {
const router = useRouter();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setError("");
setLoading(true);
const formData = new FormData(e.currentTarget);
const result = await submitVerificationAction(formData);
setLoading(false);
if (result.error) {
setError(result.error);
return;
}
router.refresh();
}
const inputCls =
"w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white";
return (
<form
onSubmit={handleSubmit}
className="space-y-5 rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm sm:p-8"
>
{error && (
<div className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
{error}
</div>
)}
<section>
<h2 className="mb-3 text-base font-bold text-neutral-900">📇 Data KTP</h2>
<div className="grid gap-4 sm:grid-cols-2">
<div className="sm:col-span-2">
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Nama Lengkap (sesuai KTP)
</label>
<input
name="fullName"
type="text"
required
defaultValue={initial?.fullName ?? ""}
className={inputCls}
placeholder="Mis. Budi Santoso"
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
NIK (16 digit)
</label>
<input
name="nik"
type="text"
inputMode="numeric"
pattern="\d{16}"
maxLength={16}
required
defaultValue={initial?.nik ?? ""}
className={inputCls}
placeholder="3201xxxxxxxxxxxx"
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Tanggal Lahir
</label>
<input
name="birthDate"
type="date"
required
defaultValue={initial ? toYmd(new Date(initial.birthDate)) : ""}
className={inputCls}
/>
</div>
<div className="sm:col-span-2">
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Alamat (sesuai KTP)
</label>
<textarea
name="address"
required
rows={3}
defaultValue={initial?.address ?? ""}
className={inputCls}
placeholder="Jalan, RT/RW, kelurahan, kota, provinsi"
/>
</div>
</div>
</section>
<section>
<h2 className="mb-3 text-base font-bold text-neutral-900">🖼 Foto</h2>
<p className="mb-3 text-xs text-neutral-500">
Upload foto ke hosting (imgur, imgbb, dll) lalu paste URL-nya. Foto akan
dilihat tim admin saat review.
</p>
<div className="space-y-4">
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
URL Foto KTP
</label>
<input
name="ktpImageUrl"
type="url"
required
defaultValue={initial?.ktpImageUrl ?? ""}
className={inputCls}
placeholder="https://i.imgur.com/xxxx.jpg"
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
URL Selfie dengan KTP
</label>
<input
name="selfieUrl"
type="url"
required
defaultValue={initial?.selfieUrl ?? ""}
className={inputCls}
placeholder="https://i.imgur.com/yyyy.jpg"
/>
</div>
</div>
</section>
<section>
<h2 className="mb-3 text-base font-bold text-neutral-900">🏦 Rekening Bank</h2>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Nama Bank
</label>
<input
name="bankName"
type="text"
required
defaultValue={initial?.bankName ?? ""}
className={inputCls}
placeholder="Mis. BCA, Mandiri, BRI"
/>
</div>
<div>
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Nomor Rekening
</label>
<input
name="bankAccountNumber"
type="text"
inputMode="numeric"
required
defaultValue={initial?.bankAccountNumber ?? ""}
className={inputCls}
placeholder="1234567890"
/>
</div>
<div className="sm:col-span-2">
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Nama Pemilik Rekening
</label>
<input
name="bankAccountName"
type="text"
required
defaultValue={initial?.bankAccountName ?? ""}
className={inputCls}
placeholder="Sesuai buku tabungan"
/>
</div>
</div>
</section>
<button
type="submit"
disabled={loading}
className="w-full rounded-xl bg-primary-600 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
>
{loading ? "Mengirim..." : "Ajukan Verifikasi"}
</button>
<p className="text-center text-xs text-neutral-500">
Data KTP & rekening hanya digunakan untuk verifikasi dan tidak akan
ditampilkan ke pengguna lain.
</p>
</form>
);
}
+71
View File
@@ -0,0 +1,71 @@
import { z } from "zod/v4";
import { LIMITS } from "@/lib/limits";
const ymdRegex = /^\d{4}-\d{2}-\d{2}$/;
export const submitVerificationSchema = z.object({
fullName: z
.string()
.trim()
.min(2, "Nama lengkap minimal 2 karakter")
.max(LIMITS.MAX_NAME_LENGTH, `Nama maksimal ${LIMITS.MAX_NAME_LENGTH} karakter`),
nik: z
.string()
.trim()
.regex(/^\d{16}$/, "NIK harus 16 digit angka"),
birthDate: z
.string()
.trim()
.regex(ymdRegex, "Format tanggal lahir harus YYYY-MM-DD"),
address: z
.string()
.trim()
.min(5, "Alamat minimal 5 karakter")
.max(LIMITS.MAX_ADDRESS_LENGTH, `Alamat maksimal ${LIMITS.MAX_ADDRESS_LENGTH} karakter`),
ktpImageUrl: z
.string()
.trim()
.min(1, "Foto KTP wajib diisi")
.max(LIMITS.MAX_URL_LENGTH, "URL foto KTP terlalu panjang")
.pipe(z.url("URL foto KTP tidak valid")),
selfieUrl: z
.string()
.trim()
.min(1, "Foto selfie dengan KTP wajib diisi")
.max(LIMITS.MAX_URL_LENGTH, "URL foto selfie terlalu panjang")
.pipe(z.url("URL foto selfie tidak valid")),
bankName: z
.string()
.trim()
.min(2, "Nama bank minimal 2 karakter")
.max(LIMITS.MAX_BANK_NAME_LENGTH, `Nama bank maksimal ${LIMITS.MAX_BANK_NAME_LENGTH} karakter`),
bankAccountNumber: z
.string()
.trim()
.regex(/^[0-9-]+$/, "Nomor rekening hanya boleh angka")
.min(5, "Nomor rekening minimal 5 digit")
.max(LIMITS.MAX_BANK_ACCOUNT_NUMBER_LENGTH, "Nomor rekening terlalu panjang"),
bankAccountName: z
.string()
.trim()
.min(2, "Nama pemilik rekening minimal 2 karakter")
.max(LIMITS.MAX_NAME_LENGTH, `Nama pemilik rekening maksimal ${LIMITS.MAX_NAME_LENGTH} karakter`),
});
export const reviewVerificationSchema = z.object({
verificationId: z.string().min(1, "Verification ID wajib"),
decision: z.enum(["APPROVED", "REJECTED"], {
error: "Keputusan tidak valid",
}),
rejectionReason: z
.string()
.trim()
.max(LIMITS.MAX_REJECTION_REASON_LENGTH, "Alasan penolakan terlalu panjang")
.optional(),
}).refine(
(data) => data.decision !== "REJECTED" || (data.rejectionReason && data.rejectionReason.length > 0),
{ message: "Alasan penolakan wajib diisi jika menolak", path: ["rejectionReason"] }
);
export type SubmitVerificationInput = z.infer<typeof submitVerificationSchema>;
export type ReviewVerificationInput = z.infer<typeof reviewVerificationSchema>;