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 } from 'recharts'; export default function AdminRevenue() { const [revenue, setRevenue] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { loadRevenue(); }, []); const loadRevenue = async () => { try { const { data } = await adminAPI.getRevenue(12); setRevenue(data.data); } catch (err) { console.error(err); } setLoading(false); }; const formatIDR = (n: number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n); const chartData = Object.entries(revenue?.monthlyRevenue || {}).map(([month, amount]) => ({ month, revenue: amount as number, })); if (loading) return

; return ( <> Revenue Report – MarketScope Admin

💰 Revenue Report

Total Revenue

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

Avg Monthly

{formatIDR((revenue?.totalRevenue || 0) / (chartData.length || 1))}

Last Month

{chartData.length > 0 ? formatIDR(chartData[chartData.length - 1].revenue) : 'Rp 0'}

Revenue Trend (Last 12 Months)

`${(v / 1000000).toFixed(1)}jt`} axisLine={false} tickLine={false} /> [formatIDR(v), 'Revenue']} />

); }