React Dashboard Page with Auth and Components

import { Suspense } from 'react'
import Link from 'next/link'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Overview } from "@/components/dashboard/overview"
import { RecentProjects } from "@/components/dashboard/recent-projects"
import { auth } from '@/auth'
import { FileText, CheckCircle, Clock, CheckSquare, Loader2 } from 'lucide-react'
import { QuickActions } from '@/components/dashboard/quick-actions'
import { Notifications } from '@/components/dashboard/notifications'

export default async function DashboardPage() {
  const session = await auth()

  return (
    <div className="flex-1 flex flex-col bg-background">
      <div className="container mx-auto py-8 space-y-8">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="space-y-1">
            <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
            <p className="text-muted-foreground">
              Benvenuto, {session?.user?.name || session?.user?.email}
            </p>
          </div>
          <div className="flex gap-4">
            <Button asChild variant="outline">
              <Link href="/dashboard/nuovo-briefing">Nuovo Briefing</Link>
            </Button>
            <Button asChild>
              <Link href="/dashboard/nuovo-preventivo">Nuovo Preventivo</Link>
            </Button>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {[
            { title: "Preventivi Totali", value: 12, icon: FileText, change: "+2 questa settimana" },
            { title: "Preventivi Approvati", value: 8, icon: CheckCircle, change: "+1 questo mese" },
            { title: "Progetti in Corso", value: 5, icon: Clock, change: "2 in scadenza" },
            { title: "Progetti Completati", value: 18, icon: CheckSquare, change: "+3 questo mese" }
          ].map((item, index) => (
            <Card key={index} className="hover:shadow-md transition-shadow">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">{item.title}</CardTitle>
                <item.icon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{item.value}</div>
                <p className="text-xs text-muted-foreground mt-1">{item.change}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
          <Card className="col-span-4">
            <CardHeader>
              <CardTitle>Overview Progetti</CardTitle>
              <CardDescription>Andamento dei progetti negli ultimi 6 mesi</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px]">
              <Suspense fallback={<LoadingSpinner />}>
                <Overview />
              </Suspense>
            </CardContent>
          </Card>
          <Card className="col-span-3">
            <CardHeader>
              <CardTitle>Progetti Recenti</CardTitle>
              <CardDescription>
                Hai 5 progetti in corso
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<LoadingSpinner />}>
                <RecentProjects />
              </Suspense>
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Azioni Rapide</CardTitle>
              <CardDescription>Accesso veloce alle funzioni principali</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<LoadingSpinner />}>
                <QuickActions />
              </Suspense>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Notifiche</CardTitle>
              <CardDescription>Aggiornamenti recenti e attività</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<LoadingSpinner />}>
                <Notifications />
              </Suspense>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center h-full">
      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
    </div>
  )
}