"use client"; import { FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; type PreviewImage = { id: string; file: File; preview: string; }; export default function CreateAchievementPage() { const router = useRouter(); const [form, setForm] = useState({ title: "", issuer: "", date: "", description: "", url: "", }); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); // ========================= // HANDLE CHANGE // ========================= const handleChange = ( e: React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement > ) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value, })); }; // ========================= // SELECT IMAGES // ========================= const handleImageChange = ( e: React.ChangeEvent ) => { const selectedFiles = Array.from( e.target.files || [] ); if (selectedFiles.length === 0) { return; } const allowedTypes = [ "image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif", ]; const validImages: PreviewImage[] = []; for (const file of selectedFiles) { if (!allowedTypes.includes(file.type)) { alert( `${file.name} tidak didukung. Gunakan JPG, JPEG, PNG, WebP, atau GIF.` ); continue; } if (file.size > 5 * 1024 * 1024) { alert( `${file.name} terlalu besar. Maksimal 5 MB per gambar.` ); continue; } const duplicate = images.some( (item) => item.file.name === file.name && item.file.size === file.size ); if (duplicate) { continue; } validImages.push({ id: `${Date.now()}-${Math.random() .toString(36) .substring(2, 9)}`, file, preview: URL.createObjectURL(file), }); } setImages((prev) => [ ...prev, ...validImages, ]); e.target.value = ""; }; // ========================= // REMOVE IMAGE // ========================= const removeImage = (id: string) => { setImages((prev) => { const target = prev.find( (item) => item.id === id ); if (target) { URL.revokeObjectURL(target.preview); } return prev.filter( (item) => item.id !== id ); }); }; // ========================= // CLEANUP PREVIEW // ========================= useEffect(() => { return () => { images.forEach((item) => { URL.revokeObjectURL(item.preview); }); }; }, []); // ========================= // UPLOAD IMAGES // ========================= const uploadImages = async () => { if (images.length === 0) { return []; } const formData = new FormData(); images.forEach((item) => { formData.append( "files", item.file ); }); const response = await fetch( "/api/achievements/upload", { method: "POST", body: formData, } ); const result = await response.json(); if ( !response.ok || !result.success ) { throw new Error( result.message || "Gagal mengupload gambar Achievement." ); } return result.data as { url: string; fileName: string; }[]; }; // ========================= // SUBMIT // ========================= const handleSubmit = async ( e: FormEvent ) => { e.preventDefault(); if (!form.title.trim()) { alert( "Judul Achievement wajib diisi." ); return; } if (images.length === 0) { alert( "Minimal satu gambar Achievement harus dipilih." ); return; } setLoading(true); try { // ====================== // UPLOAD // ====================== const uploadedImages = await uploadImages(); if ( uploadedImages.length === 0 ) { throw new Error( "Tidak ada gambar yang berhasil diupload." ); } // ====================== // CREATE ACHIEVEMENT // ====================== const response = await fetch( "/api/achievements", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: form.title, issuer: form.issuer || null, date: form.date || null, description: form.description || null, url: form.url || null, images: uploadedImages.map( (item) => item.url ), image: uploadedImages[0].url, }), } ); const result = await response.json(); if ( !response.ok || !result.success ) { throw new Error( result.message || "Gagal membuat Achievement." ); } alert( "Achievement berhasil ditambahkan." ); router.push( "/secure-panel/achievements" ); router.refresh(); } catch (error) { console.error( "CREATE ACHIEVEMENT ERROR:", error ); alert( error instanceof Error ? error.message : "Gagal menambahkan Achievement." ); } finally { setLoading(false); } }; return ( <>
{/* ========================= MOBILE OVERLAY ========================= */}
setSidebarOpen(false) } /> {/* ========================= SIDEBAR ========================= */} {/* ========================= MAIN ========================= */}
{/* TOPBAR */}
ADMIN PANEL
Achievement Management
Website Logout
{/* ========================= CONTENT ========================= */}
{/* PAGE HEADING */}
Kembali ke Achievement
ACHIEVEMENT MANAGEMENT

Tambah Achievement

Tambahkan pencapaian, prestasi, penghargaan, atau achievement baru ke dalam website portfolio GloVaTech.

{/* FORM CARD */}
{/* CARD HEADER */}
NEW ACHIEVEMENT

Informasi Achievement

Isi informasi pencapaian dengan lengkap. Gambar pertama yang dipilih akan digunakan sebagai gambar utama achievement.

{/* FORM BODY */}
{/* ====================== BASIC INFORMATION ====================== */}

Informasi Dasar

Informasi utama mengenai achievement.

{/* TITLE */}
Gunakan judul yang singkat, jelas, dan mudah dipahami.
{/* ISSUER */}
Nama organisasi atau pihak yang memberikan penghargaan.
{/* DATE */}
Tanggal ketika achievement diperoleh.
{/* URL */}
Link sertifikat, dokumentasi, atau halaman terkait achievement.
{/* ====================== IMAGES ====================== */}

Gambar Achievement

Upload satu atau beberapa gambar sebagai dokumentasi.

Format yang didukung: JPG, JPEG, PNG, WebP, dan GIF. Maksimal 5 MB per gambar. Anda dapat memilih beberapa gambar sekaligus.
{/* PREVIEW */} {images.length > 0 && (
Preview Gambar
{images.length} gambar
{images.map( ( item, index ) => (
{`Preview {index === 0 && ( Gambar Utama )}
{item.file.name}
) )}
)}
{/* ====================== DESCRIPTION ====================== */}

Deskripsi

Jelaskan achievement secara lebih detail.