"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; interface ContactMessage { id: number; name: string; email: string; subject: string | null; message: string; isRead: boolean; createdAt: string; } export default function ContactMessagesPage() { const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [deletingId, setDeletingId] = useState(null); const fetchMessages = async () => { try { setLoading(true); const response = await fetch("/api/contact-messages", { cache: "no-store", }); const result = await response.json(); if (result.success) { setMessages(result.data); } } catch (error) { console.error("GET CONTACT MESSAGES ERROR:", error); } finally { setLoading(false); } }; const deleteMessage = async (id: number) => { const confirmed = window.confirm( "Are you sure you want to delete this message?" ); if (!confirmed) return; try { setDeletingId(id); const response = await fetch("/api/contact-messages", { method: "DELETE", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id, }), }); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Failed to delete message."); return; } await fetchMessages(); } catch (error) { console.error("DELETE CONTACT MESSAGE ERROR:", error); alert("Failed to delete message."); } finally { setDeletingId(null); } }; useEffect(() => { fetchMessages(); }, []); const totalMessages = messages.length; const unreadMessages = messages.filter( (message) => !message.isRead ).length; const readMessages = messages.filter( (message) => message.isRead ).length; const formatDate = (date: string) => { return new Date(date).toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric", }); }; return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Contact Messages Management
Website Logout
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Dashboard
CONTACT MANAGEMENT

Contact Messages

Kelola pesan yang dikirim oleh pengunjung melalui contact form pada website GloVaTech.

{/* STATISTICS */}
Total Messages
{loading ? "—" : totalMessages}
Unread
{loading ? "—" : unreadMessages}
Read
{loading ? "—" : readMessages}
Message Status
{loading ? "Checking..." : "Connected"}
{/* CONTENT CARD */}
MESSAGE MANAGEMENT

Contact Messages

Daftar pesan yang diterima melalui contact form pada website.

{loading ? "..." : totalMessages}
{loading ? (
Memuat contact messages

Sedang mengambil pesan dari database...

) : messages.length === 0 ? (
Belum ada contact message

Belum terdapat pesan yang dikirim melalui contact form pada website.

) : ( <> {/* DESKTOP / TABLET */}
{messages.map((item) => (
{/* USER */}
{item.name}
{item.email}
{/* EMAIL */}
{item.email}
{/* SUBJECT */}
{item.subject || "-"}
{/* MESSAGE */}
{item.message}
{/* STATUS */}
{item.isRead ? ( Read ) : ( Unread )}
{/* DATE */}
{formatDate(item.createdAt)}
{/* ACTION */}
))}
{/* MOBILE */}
{messages.map((item) => (
{item.name}
{item.email}
{formatDate(item.createdAt)}
{item.isRead ? ( Read ) : ( Unread )}
Subject
{item.subject || "-"}
Message
{item.message}
))}
)}
{/* FOOTER */}
); }