"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; type User = { id: string; name: string | null; email: string | null; image: string | null; articleAccess: boolean; createdAt: string; }; export default function ArticleUsersPage() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(false); const [updatingUserId, setUpdatingUserId] = useState(null); const getUsers = async () => { try { setLoading(true); const response = await fetch( "/api/secure-panel/article-users", { cache: "no-store", credentials: "include", } ); const result = await response.json(); console.log( "ARTICLE USERS RESULT:", result ); if (result.success) { setUsers(result.data); } else { console.error( "ARTICLE USERS API ERROR:", result.message ); } } catch (error) { console.error( "GET ARTICLE USERS:", error ); } finally { setLoading(false); } }; const toggleArticleAccess = async (user: User) => { try { setUpdatingUserId(user.id); const newAccessStatus = !user.articleAccess; const response = await fetch( "/api/secure-panel/article-users", { method: "PATCH", headers: { "Content-Type": "application/json", }, credentials: "include", body: JSON.stringify({ userId: user.id, articleAccess: newAccessStatus, }), } ); const result = await response.json(); if (!response.ok || !result.success) { alert( result.message || "Gagal mengubah Article access." ); return; } setUsers((currentUsers) => currentUsers.map((currentUser) => currentUser.id === user.id ? { ...currentUser, articleAccess: result.data.articleAccess, } : currentUser ) ); } catch (error) { console.error( "TOGGLE ARTICLE ACCESS ERROR:", error ); alert( "Terjadi kesalahan saat mengubah Article access." ); } finally { setUpdatingUserId(null); } }; useEffect(() => { getUsers(); }, []); const activeUsers = users.filter( (user) => user.articleAccess ).length; const deactiveUsers = users.filter( (user) => !user.articleAccess ).length; return ( <>
{/* MOBILE OVERLAY */}
setSidebarOpen(false)} /> {/* SIDEBAR */} {/* MAIN */}
{/* TOPBAR */}
ADMIN PANEL
Article Users Management
Website Logout
{/* CONTENT */}
{/* PAGE HEADING */}
Kembali ke Articles
ARTICLE ACCESS MANAGEMENT

Article Users

Kelola pengguna yang memiliki akses untuk membuat dan mengedit artikel. Admin dapat mengaktifkan atau menonaktifkan akses Article tanpa menghapus artikel yang sudah dibuat oleh pengguna.

Articles
{/* STATISTICS */}
Total Users
{loading ? "—" : users.length}
Active
{loading ? "—" : activeUsers}
Deactive
{loading ? "—" : deactiveUsers}
{/* CONTENT CARD */}
USER ACCESS MANAGEMENT

Article Users

Daftar pengguna yang terdaftar pada sistem. Status Active memberikan akses untuk membuat dan mengedit Article, sedangkan Deactive akan menonaktifkan akses tersebut.

{loading ? "..." : users.length}
{/* LOADING */} {loading ? (
Memuat data Users

Sedang mengambil informasi pengguna dari database...

) : users.length === 0 ? ( /* EMPTY */
Belum ada user

Belum terdapat user yang terdaftar pada sistem Article. Data user akan ditampilkan setelah API user management tersedia.

) : ( /* USER LIST */
{users.map((user) => (
{/* AVATAR */}
{user.image ? ( { ) : ( )}
{/* USER */}
User
{user.name || "Unknown User"}
ID: {user.id}
{/* EMAIL */}
Email
{user.email || "-"}
{/* STATUS */}
Status
{user.articleAccess ? ( Active ) : ( Deactive )}
{/* ACTION */}
))}
)}
{/* FOOTER */}
); }