Build AI apps at the speed of thought

// Generated with: "Create a modern dashboard with authentication"
import { Metadata } from 'next'
import { redirect } from 'next/navigation'
import { getServerSession } from 'next-auth/next'
import { authOptions } from '@/lib/auth'
import { DashboardShell } from '@/components/dashboard/shell'
import { DashboardHeader } from '@/components/dashboard/header'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { CalendarDays, Users, TrendingUp, DollarSign } from 'lucide-react'

export const metadata: Metadata = {
  title: 'Dashboard',
  description: 'Your application dashboard with analytics and insights.',
}

async function getAnalytics() {
  // Server-side data fetching
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/analytics`, {
    headers: {
      'Authorization': `Bearer ${process.env.API_SECRET}`
    },
    next: { revalidate: 300 } // Revalidate every 5 minutes
  })
  
  if (!res.ok) throw new Error('Failed to fetch analytics')
  return res.json()
}

export default async function DashboardPage() {
  const session = await getServerSession(authOptions)
  
  if (!session) {
    redirect('/auth/signin')
  }

  const analytics = await getAnalytics()

  const stats = [
    {
      title: 'Total Revenue',
      value: `$${analytics.revenue.toLocaleString()}`,
      icon: DollarSign,
      change: '+12.5%'
    },
    {
      title: 'Active Users',
      value: analytics.users.toLocaleString(),
      icon: Users,
      change: '+8.2%'
    },
    {
      title: 'Growth Rate',
      value: `${analytics.growth}%`,
      icon: TrendingUp,
      change: '+2.1%'
    },
    {
      title: 'Events',
      value: analytics.events.toLocaleString(),
      icon: CalendarDays,
      change: '+15.3%'
    }
  ]

  return (
    <DashboardShell>
      <DashboardHeader 
        heading="Dashboard" 
        text="Welcome back, ${session.user.name}"
      />
      
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                {stat.title}
              </CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <p className="text-xs text-muted-foreground">
                <span className="text-green-600">{stat.change}</span> from last month
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
    </DashboardShell>
  )
}