Dashboard with Stats & Data Grid

'use client';

import { StatGrid, StatCard, DataGrid, PageHeader } from '@sofondo/react';

export default function DashboardPage() {
  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', sortable: true },
    { key: 'status', header: 'Status' }
  ];

  const users = [
    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Active' }
  ];

  return (
    <div>
      <PageHeader
        title="Dashboard"
        description="Welcome to your admin dashboard"
      />

      <StatGrid>
        <StatCard
          title="Total Users"
          value="1,234"
          trend="+12%"
          trendDirection="up"
        />
        <StatCard
          title="Revenue"
          value="$45,678"
          trend="+8%"
          trendDirection="up"
        />
        <StatCard
          title="Active Sessions"
          value="156"
          trend="-3%"
          trendDirection="down"
        />
      </StatGrid>

      <DataGrid columns={columns} data={users} keyField="id" />
    </div>
  );
}