"use client"; import { ChangeEvent, FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; type CertificationImage = { id: number; image: string; certificationId: number; createdAt: string; }; type Certification = { id: number; name: string; issuer: string; credentialId: string | null; issueDate: string; expiryDate: string | null; image: string | null; description: string | null; images: CertificationImage[]; }; type SelectedImage = { id: string; file: File; preview: string; }; export default function EditCertificationPage() { const router = useRouter(); const params = useParams(); const id = params.id as string; const [name, setName] = useState(""); const [issuer, setIssuer] = useState(""); const [credentialId, setCredentialId] = useState(""); const [issueDate, setIssueDate] = useState(""); const [expiryDate, setExpiryDate] = useState(""); const [description, setDescription] = useState(""); const [existingImages, setExistingImages] = useState< CertificationImage[] >([]); const [selectedFiles, setSelectedFiles] = useState< SelectedImage[] >([]); const [loading, setLoading] = useState(true); const [uploading, setUploading] = useState(false); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); // ===================================================== // GET CERTIFICATION // ===================================================== const getCertification = async () => { try { setLoading(true); const response = await fetch( `/api/certifications/${id}`, { method: "GET", cache: "no-store", } ); const result = await response.json(); console.log( "GET CERTIFICATION RESULT:", result ); if (!response.ok || !result.success) { alert( result.message || "Certification tidak ditemukan." ); router.push( "/secure-panel/certifications" ); return; } const certification: Certification = result.data; setName(certification.name || ""); setIssuer(certification.issuer || ""); setCredentialId( certification.credentialId || "" ); setIssueDate( certification.issueDate ? certification.issueDate.substring( 0, 10 ) : "" ); setExpiryDate( certification.expiryDate ? certification.expiryDate.substring( 0, 10 ) : "" ); setDescription( certification.description || "" ); // ================================================= // LOAD EXISTING IMAGES // ================================================= if ( Array.isArray(certification.images) && certification.images.length > 0 ) { setExistingImages( certification.images ); } else if (certification.image) { setExistingImages([ { id: 0, image: certification.image, certificationId: certification.id, createdAt: "", }, ]); } else { setExistingImages([]); } } catch (error) { console.error( "GET CERTIFICATION DETAIL ERROR:", error ); alert( "Gagal mengambil data Certification." ); router.push( "/secure-panel/certifications" ); } finally { setLoading(false); } }; useEffect(() => { if (id) { getCertification(); } }, [id]); // ===================================================== // SELECT MULTIPLE FILES // ===================================================== const handleFileChange = ( event: ChangeEvent ) => { const files = Array.from( event.target.files || [] ); if (files.length === 0) { return; } const allowedTypes = [ "image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif", ]; const maxSize = 5 * 1024 * 1024; for (const file of files) { if (!allowedTypes.includes(file.type)) { alert( `Format file ${file.name} tidak didukung.` ); event.target.value = ""; return; } if (file.size > maxSize) { alert( `Ukuran ${file.name} terlalu besar. Maksimal 5 MB.` ); event.target.value = ""; return; } } const newImages: SelectedImage[] = files.map((file) => ({ id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`, file, preview: URL.createObjectURL(file), })); setSelectedFiles((previous) => [ ...previous, ...newImages, ]); event.target.value = ""; }; // ===================================================== // REMOVE EXISTING IMAGE // ===================================================== const removeExistingImage = ( imageId: number ) => { if (existingImages.length <= 1) { alert( "Minimal satu gambar harus tersedia." ); return; } setExistingImages((previous) => previous.filter( (image) => image.id !== imageId ) ); }; // ===================================================== // REMOVE NEW IMAGE // ===================================================== const removeSelectedImage = ( imageId: string ) => { setSelectedFiles((previous) => { const image = previous.find( (item) => item.id === imageId ); if (image) { URL.revokeObjectURL( image.preview ); } return previous.filter( (item) => item.id !== imageId ); }); }; // ===================================================== // UPLOAD MULTIPLE NEW IMAGES // ===================================================== const uploadNewImages = async (): Promise< string[] | null > => { if (selectedFiles.length === 0) { return []; } setUploading(true); try { const formData = new FormData(); selectedFiles.forEach((item) => { formData.append( "files", item.file ); }); console.log( "FILE YANG AKAN DIUPLOAD:", selectedFiles.map( (item) => item.file.name ) ); const response = await fetch( "/api/certifications/upload", { method: "POST", body: formData, } ); const result = await response.json(); console.log( "UPLOAD RESULT:", result ); if ( !response.ok || !result.success ) { alert( result.message || "Gagal mengupload gambar." ); return null; } if ( !Array.isArray(result.data) ) { console.error( "FORMAT DATA UPLOAD SALAH:", result.data ); alert( "Format data gambar dari server tidak valid." ); return null; } const uploadedImages = result.data.filter( ( image: unknown ): image is string => typeof image === "string" && image.trim() !== "" ); console.log( "GAMBAR BERHASIL DIUPLOAD:", uploadedImages ); return uploadedImages; } catch (error) { console.error( "UPLOAD CERTIFICATION IMAGES ERROR:", error ); alert( "Terjadi kesalahan saat mengupload gambar." ); return null; } finally { setUploading(false); } }; // ===================================================== // SUBMIT // ===================================================== const handleSubmit = async ( event: FormEvent ) => { event.preventDefault(); if (!name.trim()) { alert( "Nama Certification wajib diisi." ); return; } if (!issuer.trim()) { alert( "Penerbit wajib diisi." ); return; } if (!issueDate) { alert( "Tanggal Terbit wajib diisi." ); return; } if ( existingImages.length === 0 && selectedFiles.length === 0 ) { alert( "Minimal satu gambar harus tersedia." ); return; } setSaving(true); try { // ================================================= // UPLOAD GAMBAR BARU // ================================================= let uploadedImages: string[] = []; if (selectedFiles.length > 0) { const uploaded = await uploadNewImages(); if (uploaded === null) { return; } uploadedImages = uploaded; } // ================================================= // GAMBAR LAMA // ================================================= const oldImages = existingImages.map( (image) => image.image ); // ================================================= // GABUNG SEMUA GAMBAR // ================================================= const allImages = [ ...oldImages, ...uploadedImages, ]; console.log( "OLD IMAGES:", oldImages ); console.log( "UPLOADED IMAGES:", uploadedImages ); console.log( "ALL IMAGES:", allImages ); if (allImages.length === 0) { alert( "Minimal satu gambar harus tersedia." ); return; } // ================================================= // UPDATE CERTIFICATION // ================================================= const response = await fetch( `/api/certifications/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: name.trim(), issuer: issuer.trim(), credentialId: credentialId.trim() || null, issueDate, expiryDate: expiryDate || null, description: description.trim() || null, // BACKEND TETAP images: allImages, }), } ); const result = await response.json(); console.log( "UPDATE CERTIFICATION RESULT:", result ); if ( !response.ok || !result.success ) { alert( result.message || "Gagal memperbarui Certification." ); return; } // ================================================= // CLEANUP PREVIEW // ================================================= selectedFiles.forEach((item) => { URL.revokeObjectURL( item.preview ); }); setSelectedFiles([]); // ================================================= // SUCCESS // ================================================= alert( "Certification berhasil diperbarui." ); router.push( "/secure-panel/certifications" ); router.refresh(); } catch (error) { console.error( "UPDATE CERTIFICATION ERROR:", error ); alert( "Terjadi kesalahan saat menyimpan Certification." ); } finally { setSaving(false); } }; // ===================================================== // LOADING // ===================================================== if (loading) { return ( <>
Memuat Certification

Sedang mengambil data dari database...

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

Edit Certification

Perbarui informasi, credential, tanggal, deskripsi, dan gambar certification yang ditampilkan pada portfolio GloVaTech.

{/* ================================================= FORM CARD ================================================= */}
{/* CARD HEADER */}
CERTIFICATION MANAGEMENT

Informasi Certification

Kelola detail sertifikasi dan seluruh gambar yang terhubung dengan data ini.

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

Informasi Dasar

Informasi utama mengenai certification.

{/* NAME */}
setName( event.target.value ) } placeholder="Contoh: Microsoft Certified: Azure Fundamentals" disabled={ saving || uploading } required />
{/* ISSUER */}
setIssuer( event.target.value ) } placeholder="Contoh: Microsoft" disabled={ saving || uploading } required />
{/* CREDENTIAL */}
setCredentialId( event.target .value ) } placeholder="Contoh: ABC123XYZ" disabled={ saving || uploading } /> Kosongkan jika certification tidak memiliki Credential ID.
{/* ISSUE DATE */}
setIssueDate( event.target .value ) } disabled={ saving || uploading } required />
{/* EXPIRY DATE */}
setExpiryDate( event.target .value ) } disabled={ saving || uploading } /> Kosongkan jika tidak memiliki masa berlaku.
{/* ================================================= EXISTING IMAGES ================================================= */}

Gambar Certification

Kelola gambar yang sudah tersimpan pada certification.

Gambar Tersimpan
Gambar pertama digunakan sebagai gambar utama.
{existingImages.length}
{existingImages.length > 0 ? (
{existingImages.map( (item, index) => (
{`${name} {index === 0 ? "Gambar Utama" : `Gambar ${ index + 1 }`}
{item.image}
) )}
) : (
Belum ada gambar
Tambahkan minimal satu gambar melalui bagian upload di bawah.
)}
{/* ================================================= UPLOAD NEW IMAGES ================================================= */}

Tambah Gambar

Upload gambar baru tanpa mengubah gambar yang masih tersimpan.

Pilih satu atau beberapa gambar. Format yang didukung JPG, JPEG, PNG, WEBP, dan GIF. Maksimal 5 MB untuk setiap gambar.
{/* ================================================= NEW IMAGE PREVIEW ================================================= */} {selectedFiles.length > 0 && (

Preview Gambar Baru

Gambar berikut akan ditambahkan ketika Anda menyimpan perubahan.

File Siap Ditambahkan
Hapus file yang tidak ingin digunakan sebelum menyimpan.
{selectedFiles.length}
{selectedFiles.map( ( item, index ) => (
{ Gambar Baru
{item.file .name}
) )}
)} {/* ================================================= DESCRIPTION ================================================= */}

Deskripsi

Jelaskan detail atau informasi tambahan mengenai certification.