React Dashboard Page with Auth and Components

This snippet showcases a React component for a dashboard page, utilizing Next.js features along with several UI components like buttons and cards. It also integrates authentication to manage user sessions. Check it out to see how to set up a layout with dynamic content and UI elements!
 avatar
unknown
javascript
5 months ago
4.8 kB
1
Indexable
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>
  )
}
Editor is loading...
Leave a Comment