import { useEffect, useState } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import PortalLayout from '@/layouts/portal-layout'; import { CheckCircle2, AlertCircle, Search, ArrowRight } from 'lucide-react'; import '../../../css/alumni-home.css'; interface Alumni { npm: string; nama: string; prodi: string; tahun_lulus: string | number; } function getCsrfToken(): string { return decodeURIComponent( document.cookie .split('; ') .find((c) => c.startsWith('XSRF-TOKEN=')) ?.slice(11) ?? '', ); } export default function KirimKegiatan() { const form = useForm({ submission_type: 'activity', news_category: 'Lowongan Kerja', npm: '', title: '', description: '', activity_date: '', institution_company: '', location: '', documentation: null as File | null, }); const [alumni, setAlumni] = useState(null); const [lookingUp, setLookingUp] = useState(false); const [lookupError, setLookupError] = useState(''); const [showSuccessModal, setShowSuccessModal] = useState(false); const [preview, setPreview] = useState(''); const [fileKey, setFileKey] = useState(0); useEffect(() => { if (!form.data.documentation) { setPreview(''); return; } const url = URL.createObjectURL(form.data.documentation); setPreview(url); return () => URL.revokeObjectURL(url); }, [form.data.documentation]); // Verifikasi NPM langsung ke SIMAK — tanpa OTP async function handleVerifyNpm() { const trimmed = form.data.npm.trim(); if (!trimmed) { setLookupError('Masukkan NPM terlebih dahulu.'); return; } setLookingUp(true); setLookupError(''); try { const response = await fetch('/api/verify-alumni-npm', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': getCsrfToken(), }, body: JSON.stringify({ npm: trimmed }), }); const json = await response.json(); if (response.ok && json.success && json.data) { setAlumni(json.data); setLookupError(''); } else { setLookupError( response.status === 429 ? 'Terlalu banyak percobaan. Tunggu beberapa menit lalu coba lagi.' : json.message || 'NPM tidak ditemukan. Pastikan NPM yang Anda masukkan sudah benar.', ); } } catch { setLookupError('Gagal terhubung ke server. Periksa koneksi internet Anda.'); } finally { setLookingUp(false); } } function resetAlumni() { setAlumni(null); setLookupError(''); } return (

Kirim berita dan kegiatan alumni.

Pengalaman karier, penelitian, pengabdian, hingga prestasi. Ceritakan perjalanan Anda sebagai bagian dari alumni Fakultas Teknik UNMA.

{ e.preventDefault(); if (!alumni) return; form.post('/api/v1/activities', { forceFormData: true, onSuccess: () => { form.reset(); resetAlumni(); setFileKey((k) => k + 1); setShowSuccessModal(true); }, }); }} > {form.wasSuccessful && (
Kegiatan berhasil dikirim. Admin fakultas akan meninjau kiriman Anda sebelum dipublikasikan.
)} {Object.keys(form.errors).length > 0 && (
{Object.entries(form.errors).map(([key, message]) => (

{message}

))}
)} {/* VERIFIKASI NPM */}
Verifikasi Identitas Alumni {!alumni ? (
{ form.setData('npm', e.target.value); setLookupError(''); }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleVerifyNpm(); } }} />
Dukungan format ganda: tanpa titik ( 221410059) atau dengan titik (22.14.1.0059).
{lookupError && (
{lookupError}
)}
) : ( /* Badge identitas terverifikasi */
{alumni.nama} {alumni.prodi} · Lulus{' '} {alumni.tahun_lulus} (NPM:{' '} {alumni.npm}) ✓ Identitas alumni terverifikasi
)}
{/* DETAIL KIRIMAN */}
Detail kiriman
{form.data.submission_type === 'news' && (
Berita masuk sebagai draft untuk ditinjau admin. Cantumkan tautan pendaftaran dan batas waktu dalam isi berita.
)}
form.setData('title', e.target.value)} /> Contoh: Berbagi pengalaman sebagai insinyur pada kuliah tamu.
form.setData('activity_date', e.target.value)} />
form.setData('location', e.target.value)} />
form.setData('institution_company', e.target.value)} />