import { useState, useEffect } from 'react'; import Head from 'next/head'; import Layout from '../components/Layout'; import { scanAPI, licenseAPI } from '../services/api'; import { useAuth } from '../hooks/useAuth'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area, PieChart, Pie, Cell, } from 'recharts'; const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']; interface ScanHistoryItem { id: string; marketplace: string; keyword: string | null; totalProducts: number; avgPrice: number | null; medianPrice: number | null; createdAt: string; aiRecommendation: any; } export default function DashboardPage() { const { user, isPro } = useAuth(); const [stats, setStats] = useState({ totalScans: 0, license: null as any }); const [recentScans, setRecentScans] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { loadDashboard(); }, []); const loadDashboard = async () => { try { const [scanRes, licenseRes] = await Promise.all([ scanAPI.getHistory({ page: '1', limit: '10' }), licenseAPI.getMy().catch(() => ({ data: { data: null } })), ]); setRecentScans(scanRes.data.data.scans || []); setStats({ totalScans: scanRes.data.data.total || 0, license: licenseRes.data.data, }); } catch (err) { console.error('Dashboard load error:', err); } setLoading(false); }; const formatIDR = (n: number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n); // Chart data from recent scans const chartData = recentScans.slice(0, 7).reverse().map((s) => ({ date: new Date(s.createdAt).toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }), avg: s.avgPrice || 0, median: s.medianPrice || 0, products: s.totalProducts, })); const marketplaceData = recentScans.reduce((acc, s) => { const existing = acc.find((a) => a.name === s.marketplace); if (existing) existing.value++; else acc.push({ name: s.marketplace, value: 1 }); return acc; }, [] as { name: string; value: number }[]); return ( <> Dashboard – MarketScope
{/* Header */}

Dashboard

Welcome back, {user?.name} 👋

{isPro ? '⭐ PRO' : '🆓 FREE'}
{/* Stat Cards */}

Total Scans

{stats.totalScans}

Plan

{stats.license?.plan || 'FREE'}

Max Scan

{stats.license?.maxScan === -1 ? '∞' : stats.license?.maxScan || 50}

License Key

{stats.license?.key || '-'}

{/* Charts Row */}
{/* Price Trend */}

📈 Trend Harga Scan Terakhir

`${(v / 1000).toFixed(0)}k`} />
{/* Marketplace Distribution */}

🏪 Marketplace

{marketplaceData.map((_, i) => ( ))}
{marketplaceData.map((m, i) => (
{m.name}
))}
{/* Recent Scans Table */}

🔍 Scan Terakhir

{recentScans.map((scan) => ( ))} {recentScans.length === 0 && ( )}
Marketplace Keyword Products Avg Price Median Date
{scan.marketplace} {scan.keyword || '-'} {scan.totalProducts} {scan.avgPrice ? formatIDR(scan.avgPrice) : '-'} {scan.medianPrice ? formatIDR(scan.medianPrice) : '-'} {new Date(scan.createdAt).toLocaleDateString('id-ID')}
Belum ada scan. Gunakan Chrome Extension untuk mulai scanning.
{/* AI Recommendation Summary */} {isPro && recentScans.length > 0 && recentScans[0].aiRecommendation && (

🤖 AI Recommendation (Latest Scan)

Entry Price

{formatIDR(recentScans[0].aiRecommendation.entryPrice)}

Competitive

{formatIDR(recentScans[0].aiRecommendation.competitivePrice)}

Premium

{formatIDR(recentScans[0].aiRecommendation.premiumPrice)}

)}
); }