import { useState, useEffect } from 'react'; import Head from 'next/head'; import Layout from '../../components/Layout'; import { adminAPI } from '../../services/api'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts'; export default function AdminDashboard() { const [stats, setStats] = useState(null); const [users, setUsers] = useState([]); const [revenue, setRevenue] = useState({}); const [loading, setLoading] = useState(true); const [genForm, setGenForm] = useState({ userId: '', plan: 'PRO_MONTHLY', durationDays: 30 }); useEffect(() => { loadAdmin(); }, []); const loadAdmin = async () => { try { const [dashRes, usersRes, revRes] = await Promise.all([ adminAPI.getDashboard(), adminAPI.getUsers({ page: '1', limit: '20' }), adminAPI.getRevenue(12), ]); setStats(dashRes.data.data); setUsers(usersRes.data.data.users || []); setRevenue(revRes.data.data); } catch (err) { console.error(err); } setLoading(false); }; const handleSuspend = async (id: string) => { if (!confirm('Suspend user ini?')) return; await adminAPI.suspendUser(id); loadAdmin(); }; const handleActivate = async (id: string) => { await adminAPI.activateUser(id); loadAdmin(); }; const handleGenerateLicense = async () => { if (!genForm.userId) return alert('User ID required'); try { await adminAPI.generateLicense({ userId: genForm.userId, plan: genForm.plan, durationDays: genForm.durationDays }); alert('License generated!'); setGenForm({ userId: '', plan: 'PRO_MONTHLY', durationDays: 30 }); } catch (err: any) { alert(err.response?.data?.message || 'Failed'); } }; const formatIDR = (n: number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n); const revenueChart = Object.entries(revenue?.monthlyRevenue || {}).map(([month, amount]) => ({ month, revenue: amount as number, })); if (loading) return

; return ( <> Admin – MarketScope

🛡️ Admin Dashboard

{/* Stats */}

Total Users

{stats?.totalUsers || 0}

Active Subs

{stats?.activeSubscriptions || 0}

Total Revenue

{formatIDR(stats?.totalRevenue || 0)}

Total Scans

{stats?.totalScans || 0}

{/* Revenue Chart */}

💰 Monthly Revenue

`${(v / 1000000).toFixed(1)}jt`} /> formatIDR(v)} />

{/* Users Table */}

👥 Users

{users.map((u) => ( ))}

Name	Email	Role	Status	Action
{u.name}	{u.email}	{u.role}	{u.status}	{u.status === 'ACTIVE' ? ( ) : ( )}

{/* Generate License */}

🔑 Generate License

setGenForm({ ...genForm, userId: e.target.value })} className="input-field text-sm" placeholder="User ID" /> setGenForm({ ...genForm, durationDays: Number(e.target.value) })} className="input-field text-sm" placeholder="Duration (days)" />

); }