import { For, Show, createResource } from 'solid-js'; import { Download, Users, Building2, TrendingUp, CreditCard, ArrowUpRight, ArrowDownRight } from 'lucide-solid'; import AdminShell from '~/components/AdminShell'; const API = '/api/gateway'; async function fetchMetrics() { const res = await fetch(`${API}/api/admin/dashboard/metrics`); if (!res.ok) throw new Error('Failed to fetch dashboard metrics'); return res.json(); } const maxAmount = 80000; export default function AdminDashboard() { const [data] = createResource(fetchMetrics); const kpis = () => data()?.kpis || []; const trendSeries = () => data()?.trend_series?.map((d: any) => d.Freelancers) || [0, 0, 0, 0, 0, 0]; const revSeries = () => data()?.rev_series?.map((d: any) => d.Revenue) || [0, 0, 0, 0, 0, 0]; const leadRows = () => data()?.lead_rows || []; return (
{/* Header Section without background */}

Dashboard Overview

Welcome back! Here's what's happening with your platform today.

Loading metrics...
 {/* KPI Cards */}
{(item: any) => { const isUsers = item.id === 'users'; const isCompanies = item.id === 'companies'; const isLeads = item.id === 'leads'; const Icon = isUsers ? Users : isCompanies ? Building2 : isLeads ? TrendingUp : CreditCard; return (
}> {item.trend}

{item.title}

{item.value}

{item.trendUp ? '+1,245' : '-27'} {' '} from last month

); }}
{/* Charts Row */}
{/* Leads Trend Card */}

Leads Trend

Monthly leads performance overview

{/* Y-Axis labels and grid */}
{(val) => (
{val}
)}
{/* Line Chart Component */}
`${i * (100 / 6)},${40 - v / 3}`).join(' ')} 100,40`} /> `${i * (100 / 6)},${40 - v / 3}`).join(' ')} />
{/* X-Axis labels */}
{(month) => {month}}
{/* Revenue Overview Card */}

Revenue Overview

Monthly revenue vs expenses comparison

{/* Y-Axis labels and grid */}
{(val) => (
{val}
)}
{/* Bar Chart Component */}
{(value: number) => (
)}
{/* X-Axis labels */}
{(month) => {month}}
); }