"use client"; import { FormEvent, useEffect, useRef, useState, } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; type AchievementImage = { id: number; image: string; achievementId: number; createdAt: string; }; type Achievement = { id: number; title: string; issuer: string | null; date: string | null; description: string | null; image: string | null; url: string | null; achievementimage: AchievementImage[]; }; type ImageItem = { id: string; url: string; isNew?: boolean; }; export default function EditAchievementPage() { const params = useParams(); const router = useRouter(); const id = params.id as string; const fileInputRef = useRef(null); const [form, setForm] = useState({ title: "", issuer: "", date: "", description: "", url: "", }); const [images, setImages] = useState([]); const [loading, setLoading] = useState(true); const [uploading, setUploading] = useState(false); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); // ========================================================= // GET ACHIEVEMENT // ========================================================= useEffect(() => { const getAchievement = async () => { try { setLoading(true); const response = await fetch( `/api/achievements/${id}`, { cache: "no-store", } ); const result = await response.json(); if (!result.success) { alert( result.message || "Achievement tidak ditemukan" ); router.push("/secure-panel/achievements"); return; } const achievement: Achievement = result.data; setForm({ title: achievement.title || "", issuer: achievement.issuer || "", date: achievement.date ? achievement.date.substring(0, 10) : "", description: achievement.description || "", url: achievement.url || "", }); // ===================================================== // LOAD ALL IMAGES // ===================================================== const savedImages = Array.isArray( achievement.achievementimage ) ? achievement.achievementimage.map( (item) => ({ id: String(item.id), url: item.image, isNew: false, }) ) : []; // Support data lama if ( savedImages.length === 0 && achievement.image ) { savedImages.push({ id: `old-${achievement.id}`, url: achievement.image, isNew: false, }); } setImages(savedImages); } catch (error) { console.error( "GET ACHIEVEMENT:", error ); alert( "Gagal mengambil data Achievement" ); router.push("/secure-panel/achievements"); } finally { setLoading(false); } }; if (id) { getAchievement(); } }, [id, router]); // ========================================================= // FORM CHANGE // ========================================================= const handleChange = ( e: React.ChangeEvent< HTMLInputElement | HTMLTextAreaElement > ) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value, })); }; // ========================================================= // OPEN FILE PICKER // ========================================================= const handleAddImage = () => { if (uploading || saving) return; fileInputRef.current?.click(); }; // ========================================================= // UPLOAD IMAGE // ========================================================= const handleFileChange = async ( e: React.ChangeEvent ) => { const files = e.target.files; if (!files || files.length === 0) { return; } setUploading(true); try { const formData = new FormData(); Array.from(files).forEach((file) => { formData.append("files", 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" ); } const uploadedImages = Array.isArray( result.data ) ? result.data : []; const newImages: ImageItem[] = uploadedImages .filter( (item: { url?: string; }) => typeof item.url === "string" && item.url.trim() !== "" ) .map( ( item: { url: string; }, index: number ) => ({ id: `new-${Date.now()}-${index}`, url: item.url, isNew: true, }) ); if (newImages.length === 0) { throw new Error( "Tidak ada gambar yang berhasil diupload" ); } setImages((prev) => [ ...prev, ...newImages, ]); } catch (error) { console.error( "UPLOAD ACHIEVEMENT IMAGE:", error ); alert( error instanceof Error ? error.message : "Gagal mengupload gambar" ); } finally { setUploading(false); if (fileInputRef.current) { fileInputRef.current.value = ""; } } }; // ========================================================= // REMOVE IMAGE // ========================================================= const removeImage = (imageId: string) => { if (saving || uploading) return; setImages((prev) => prev.filter( (item) => item.id !== imageId ) ); }; // ========================================================= // SUBMIT // ========================================================= const handleSubmit = async ( e: FormEvent ) => { e.preventDefault(); if (!form.title.trim()) { alert( "Judul Achievement wajib diisi" ); return; } if (saving || uploading) { return; } setSaving(true); try { const imageUrls = images .map((item) => item.url) .filter( (url) => typeof url === "string" && url.trim() !== "" ); const response = await fetch( `/api/achievements/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: form.title.trim(), issuer: form.issuer.trim() || null, date: form.date || null, description: form.description.trim() || null, url: form.url.trim() || null, // SEMUA GAMBAR images: imageUrls, // GAMBAR PERTAMA SEBAGAI GAMBAR UTAMA image: imageUrls[0] || null, }), } ); const result = await response.json(); if (!response.ok || !result.success) { throw new Error( result.message || "Gagal memperbarui Achievement" ); } alert( "Achievement berhasil diperbarui" ); router.push( "/secure-panel/achievements" ); router.refresh(); } catch (error) { console.error( "UPDATE ACHIEVEMENT:", error ); alert( error instanceof Error ? error.message : "Gagal memperbarui Achievement" ); } finally { setSaving(false); } }; // ========================================================= // LOADING // ========================================================= if (loading) { return ( <>
Memuat data Achievement

Sedang mengambil data dari database...

); } // ========================================================= // PAGE // ========================================================= return ( <>
{/* ===================================================== MOBILE OVERLAY ===================================================== */}
setSidebarOpen(false)} /> {/* ===================================================== SIDEBAR ===================================================== */} {/* ===================================================== MAIN ===================================================== */}
{/* =================================================== TOPBAR =================================================== */}
ADMIN PANEL
Achievement Management
Website Logout
{/* =================================================== CONTENT =================================================== */}
{/* PAGE HEADING */}
Kembali ke Achievement
ACHIEVEMENT MANAGEMENT

Edit Achievement

Perbarui informasi achievement, penyelenggara, tanggal, deskripsi, URL, serta gambar yang ditampilkan pada website portfolio GloVaTech.

Daftar Achievement
{/* ================================================= EDIT CARD ================================================= */}
{/* CARD HEADER */}
CONTENT MANAGEMENT

Achievement Information

Kelola informasi detail achievement yang akan digunakan pada website. Pastikan data yang dimasukkan sudah sesuai sebelum menyimpan perubahan.

{id}
{/* CARD BODY */}
{/* ================================================= BASIC INFORMATION ================================================= */}

Informasi Achievement

Masukkan informasi utama achievement seperti judul, penerbit, tanggal, dan URL referensi.

{/* TITLE */}
{/* ISSUER */}
{/* DATE */}
{/* URL */}
Masukkan link sertifikat, dokumentasi, atau referensi achievement jika tersedia.
{/* ================================================= DESCRIPTION ================================================= */}

Deskripsi

Jelaskan achievement secara singkat, jelas, dan informatif.