"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; type Article = { id: number; title: string; slug: string; excerpt: string | null; category: string | null; published: boolean; publishedAt: string | null; author: { id: string; name: string | null; email: string | null; image: string | null; } | null; }; export default function ArticlesPage() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [deletingId, setDeletingId] = useState(null); const getArticles = async () => { try { setLoading(true); const response = await fetch("/api/articles", { cache: "no-store", }); const result = await response.json(); if (result.success) { setArticles(result.data); } } catch (error) { console.error("GET ARTICLES:", error); } finally { setLoading(false); } }; useEffect(() => { getArticles(); }, []); const deleteArticle = async (id: number) => { const confirmed = window.confirm( "Yakin ingin menghapus artikel ini?" ); if (!confirmed) return; try { setDeletingId(id); const response = await fetch(`/api/articles/${id}`, { method: "DELETE", }); const result = await response.json(); if (result.success) { alert("Blog berhasil dihapus"); await getArticles(); } else { alert(result.message || "Gagal menghapus Blog"); } } catch (error) { console.error("DELETE ARTICLE:", error); alert("Gagal menghapus Blog"); } finally { setDeletingId(null); } }; const totalArticles = articles.length; const publishedArticles = articles.filter( (article) => article.published ).length; const draftArticles = articles.filter( (article) => !article.published ).length; const categorizedArticles = articles.filter( (article) => article.category ).length; return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Articles Management
Website Logout
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Dashboard
WEBSITE CONTENT

Articles

Kelola artikel blog yang ditampilkan pada website portfolio GloVaTech, termasuk judul, kategori, status publikasi, slug, dan informasi tanggal publikasi.

Article Users Tambah Artikel
{/* STATISTICS */}
Total Articles
{loading ? "—" : totalArticles}
Published
{loading ? "—" : publishedArticles}
Draft
{loading ? "—" : draftArticles}
Categorized
{loading ? "—" : categorizedArticles}
{/* CONTENT CARD */}
CONTENT MANAGEMENT

Blog Articles

Daftar artikel yang dapat dikelola melalui halaman admin. Gunakan tombol Edit untuk memperbarui artikel atau Hapus untuk menghapus data dari sistem.

{loading ? "..." : totalArticles}
{/* LOADING */} {loading ? (
Memuat data Articles

Sedang mengambil informasi dari database...

) : articles.length === 0 ? ( /* EMPTY */
Belum ada artikel

Belum terdapat artikel Blog. Tambahkan artikel baru untuk menampilkan konten pada website utama.

Tambah Artikel
) : ( /* ARTICLE LIST */
{articles.map((article) => (
{/* ICON */}
{/* ARTICLE TITLE */}
{article.category ? (
{article.category}
) : (
Tanpa Kategori
)}
{article.title}
/{article.slug}
{/* AUTHOR */}
Author
{article.author?.name || "Author belum tersedia"}
{/* EXCERPT */}
{article.excerpt ? article.excerpt : "Tidak ada ringkasan artikel."}
{/* STATUS + DATE */}
{article.published ? ( Published ) : ( Draft )}
{article.publishedAt ? new Date( article.publishedAt ).toLocaleDateString("id-ID") : "Belum dipublikasikan"}
{/* ACTION */}
Edit
))}
)}
{/* FOOTER */}
); }