"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; 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; // SESUAI DENGAN API / PRISMA certificationimage: CertificationImage[]; }; export default function CertificationsAdminPage() { const [certifications, setCertifications] = useState< Certification[] >([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [deletingId, setDeletingId] = useState(null); // ========================= // GET CERTIFICATIONS // ========================= const getCertifications = async () => { try { setLoading(true); const response = await fetch("/api/certifications", { cache: "no-store", }); const result = await response.json(); if (result.success) { setCertifications(result.data); } else { console.error(result.message); } } catch (error) { console.error("GET CERTIFICATIONS:", error); } finally { setLoading(false); } }; useEffect(() => { getCertifications(); }, []); // ========================= // DELETE CERTIFICATION // ========================= const deleteCertification = async (id: number) => { const confirmDelete = window.confirm( "Yakin ingin menghapus certification ini?" ); if (!confirmDelete) return; try { setDeletingId(id); const response = await fetch( `/api/certifications?id=${id}`, { method: "DELETE", } ); const result = await response.json(); if (!response.ok || !result.success) { alert( result.message || "Gagal menghapus certification" ); return; } await getCertifications(); } catch (error) { console.error( "DELETE CERTIFICATION:", error ); alert( "Gagal menghapus certification" ); } finally { setDeletingId(null); } }; // ========================= // STATISTICS // ========================= const totalCertification = certifications.length; const certificationWithImage = certifications.filter((certification) => { const images = certification.certificationimage && certification.certificationimage.length > 0 ? certification.certificationimage : certification.image ? [certification.image] : []; return images.length > 0; }).length; const certificationWithoutImage = totalCertification - certificationWithImage; return ( <>
{/* ===================================================== MOBILE OVERLAY ===================================================== */}
setSidebarOpen(false) } /> {/* ===================================================== SIDEBAR ===================================================== */} {/* ===================================================== MAIN ===================================================== */}
{/* =================================================== TOPBAR =================================================== */}
ADMIN PANEL
Certification Management
Website Logout
{/* =================================================== CONTENT =================================================== */}
{/* ================================================= PAGE HEADING ================================================= */}
Kembali ke Dashboard
WEBSITE CONTENT

Certification

Kelola sertifikasi, credential, penerbit, tanggal penerbitan, dan dokumentasi sertifikat yang ditampilkan pada website portfolio GloVaTech.

Tambah Certification
{/* ================================================= STATISTICS ================================================= */}
{/* TOTAL */}
Total Certification
{loading ? "—" : totalCertification}
{/* WITH IMAGE */}
Dengan Gambar
{loading ? "—" : certificationWithImage}
{/* WITHOUT IMAGE */}
Tanpa Gambar
{loading ? "—" : certificationWithoutImage}
{/* STATUS */}
Content Status
{loading ? "Checking..." : "Connected"}
{/* ================================================= CONTENT CARD ================================================= */}
{/* HEADER */}
CONTENT MANAGEMENT

Certification & Credential

Daftar sertifikasi yang digunakan pada halaman portfolio website.

{loading ? "..." : totalCertification}
{/* ================================================= LOADING ================================================= */} {loading ? (
Memuat data Certification

Sedang mengambil informasi certification dari database...

) : certifications.length === 0 ? ( /* ================================================= EMPTY ================================================= */
Belum ada data Certification

Belum terdapat sertifikasi. Tambahkan data certification untuk menampilkan credential pada website utama.

Tambah Certification
) : ( <> {/* ================================================= DESKTOP TABLE ================================================= */}
{certifications.map( (certification) => { /* ============================ COMBINE IMAGES ============================ */ const certificationImages = certification.certificationimage && certification .certificationimage .length > 0 ? certification.certificationimage : certification.image ? [ { id: 0, image: certification.image, certificationId: certification.id, createdAt: "", }, ] : []; return ( {/* ========================== CERTIFICATION ========================== */} {/* ========================== ISSUER ========================== */} {/* ========================== CREDENTIAL ========================== */} {/* ========================== DATE ========================== */} {/* ========================== IMAGE ========================== */} {/* ========================== ACTION ========================== */} ); } )}
Certification Issuer Credential ID Issue Date Gambar Action
{certificationImages.length > 0 ? (
{certificationImages .slice(0, 3) .map( ( item, index ) => ( {`${certification.name} ) )} {certificationImages.length > 3 && (
+ {certificationImages.length - 3}
)}
) : (
)}
{ certification.name }
{certification.description && (
{certification .description .length > 80 ? `${certification.description.substring( 0, 80 )}...` : certification.description}
)} {certificationImages.length > 0 && (
{ certificationImages.length }{" "} gambar
)}
{certification.issuer || "-"}
{certification.credentialId ? ( { certification.credentialId } ) : ( - )}
{certification.issueDate ? new Date( certification.issueDate ).toLocaleDateString( "id-ID", { day: "2-digit", month: "short", year: "numeric", } ) : "-"}
{certificationImages.length > 0 ? ( { certificationImages.length } ) : ( - )}
Edit
{/* ================================================= MOBILE CARD LIST ================================================= */}
{certifications.map( (certification) => { const certificationImages = certification.certificationimage && certification .certificationimage .length > 0 ? certification.certificationimage : certification.image ? [ { id: 0, image: certification.image, certificationId: certification.id, createdAt: "", }, ] : []; return (
{/* ========================== TOP ========================== */}
{ certification.name }
{ certification.issuer || "-" }
{ certificationImages.length }
{/* ========================== IMAGES ========================== */} {certificationImages.length > 0 && (
{certificationImages .slice(0, 4) .map( ( item, index ) => ( {`${certification.name} ) )} {certificationImages.length > 4 && (
+ {certificationImages.length - 4}
)}
)} {/* ========================== DESCRIPTION ========================== */} {certification.description && (
{certification.description}
)} {/* ========================== INFORMATION ========================== */}
{/* CREDENTIAL */}
Credential ID
{ certification.credentialId || "-" }
{/* ISSUE DATE */}
Issue Date
{certification.issueDate ? new Date( certification.issueDate ).toLocaleDateString( "id-ID", { day: "2-digit", month: "short", year: "numeric", } ) : "-"}
{/* EXPIRY */}
Expiry Date
{certification.expiryDate ? new Date( certification.expiryDate ).toLocaleDateString( "id-ID", { day: "2-digit", month: "short", year: "numeric", } ) : "Tidak ada"}
{/* IMAGE */}
Dokumentasi
{certificationImages.length > 0 ? `${certificationImages.length} gambar` : "Tidak ada gambar"}
{/* ========================== ACTION ========================== */}
Edit
); } )}
)}
{/* ================================================= FOOTER ================================================= */}
); }