))} ) } 8:T996,import { DollarSign, ShoppingCart, Target, Users } from 'lucide-react' import type { DashboardApi } from './components/types' import { useData } from './use-data' import { KpiCard, RevenueChart } from './components/revenue-chart' import { OrdersTable } from './components/orders-table' const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }) const num = new Intl.NumberFormat('en-US') function Skeleton() { return (

{[0, 1, 2, 3].map((i) =>

)}

) } export default function App({ api }: { api: DashboardApi }) { const kpis = useData(() => api.kpis()) const revenue = useData(() => api.revenueByMonth()) const orders = useData(() => api.orders({ limit: 8 })) if (!kpis || !revenue || !orders) return return (

Revenue overview

Key revenue metrics, monthly performance and recent orders.

} /> } /> } /> } />

) } 9:T7e1,import { useData } from './use-data' import type { DashboardApi } from './types' const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }) const statusPill = { paid: 'bg-emerald-50 text-emerald-700', pending: 'bg-amber-50 text-amber-700', refunded: 'bg-rose-50 text-rose-700', } as const type Orders = Awaited> export function OrdersTable({ orders }: { orders: Orders }) { return (

Recent Orders

Latest 8 transactions

{orders.map((o) => (

Order	Customer	Product	Status	Amount
{o.id}	{o.customer} {o.email}