"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; interface ContactUser { id: string; name: string | null; email: string | null; image: string | null; createdAt: string; contactformusage: { remainingUses: number; active: boolean; } | null; } export default function ContactUsersPage() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [processingId, setProcessingId] = useState(null); const fetchUsers = async () => { try { setLoading(true); const response = await fetch("/api/contact-users", { cache: "no-store", }); const result = await response.json(); if (result.success) { setUsers(result.data); } } catch (error) { console.error("GET CONTACT USERS ERROR:", error); } finally { setLoading(false); } }; const reactivateUser = async (userId: string) => { const confirmed = window.confirm( "Are you sure you want to reactivate this user's contact form?" ); if (!confirmed) { return; } try { setProcessingId(userId); const response = await fetch("/api/contact-users", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ userId, action: "activate", }), }); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Failed to reactivate user."); return; } alert("Contact form has been reactivated successfully."); await fetchUsers(); } catch (error) { console.error("REACTIVATE CONTACT USER ERROR:", error); alert("Failed to reactivate user."); } finally { setProcessingId(null); } }; const deactivateUser = async (userId: string) => { const confirmed = window.confirm( "Are you sure you want to deactivate this user's contact form?" ); if (!confirmed) { return; } try { setProcessingId(userId); const response = await fetch("/api/contact-users", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ userId, action: "deactivate", }), }); const result = await response.json(); if (!response.ok || !result.success) { alert(result.message || "Failed to deactivate user."); return; } alert("Contact form has been deactivated successfully."); await fetchUsers(); } catch (error) { console.error("DEACTIVATE CONTACT USER ERROR:", error); alert("Failed to deactivate user."); } finally { setProcessingId(null); } }; useEffect(() => { fetchUsers(); }, []); const totalUsers = users.length; const activeUsers = users.filter( (user) => user.contactformusage?.active ).length; const inactiveUsers = users.filter( (user) => !user.contactformusage?.active ).length; const availableUses = users.reduce( (total, user) => total + (user.contactformusage?.remainingUses ?? 3), 0 ); return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Contact User Management
Website Logout
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Dashboard
CONTACT MANAGEMENT

Contact Users

Kelola pengguna yang telah menggunakan fitur contact form pada website GloVaTech, termasuk status akses, jumlah penggunaan, informasi akun, dan tanggal registrasi.

{/* STATISTICS */}
Total Users
{loading ? "—" : totalUsers}
Active Users
{loading ? "—" : activeUsers}
Inactive Users
{loading ? "—" : inactiveUsers}
Available Uses
{loading ? "—" : availableUses}
{/* CONTENT CARD */}
USER MANAGEMENT

Contact Form Users

Daftar pengguna yang memiliki akses ke contact form. Admin dapat melihat informasi pengguna serta mengaktifkan atau menonaktifkan akses contact form.

{loading ? "..." : totalUsers}
{/* LOADING */} {loading ? (
Memuat data Contact Users

Sedang mengambil informasi pengguna dari database...

) : users.length === 0 ? ( /* EMPTY */
No Contact Users Yet

No Google users have used the contact form yet.

) : ( /* TABLE */
{users.map((user) => ( {/* USER */} {/* EMAIL */} {/* REMAINING USES */} {/* STATUS */} {/* REGISTERED */} {/* ACTION */} {/* ACTION */} ))}
User Email Remaining Uses Status Registered Action
{user.image ? ( { ) : ( )}
{user.name || "Unknown User"}
ID: {user.id}
{user.email || "-"}
{ user .contactformusage ?.remainingUses ?? 3 } / 3
{user.contactformusage?.active ? ( Active ) : ( Inactive )}
{new Date( user.createdAt ).toLocaleDateString( "en-US", { day: "2-digit", month: "short", year: "numeric", } )}
{user.contactformusage?.active ? ( ) : ( )}
)}
{/* FOOTER */}
); }